Question

我在待办事项列表项目下工作，在向清单项目添加评论时遇到问题。这就是我现在所拥有的：

添加列表项后，您应该可以单击该项目，然后会出现一个带有注释的新窗口。在评论部分，应使用Ctrl + Enter组合键添加评论。

将注释添加到列表项时遇到了问题（应该将它们添加到特定列表项的“注释”数组中）。

请您解释一下我做错了什么以及为什么我的评论没有添加。

更新：我已经更新了代码，但是当我按Ctr + Enter添加评论时出现以下错误：[错误]（http://joxi.ru/Q2KR1G3U4lZJYm）我试图绑定addItem方法，但没有结果。 addItem方法有什么问题？

这是我的主要组成部分：

App.js

import React, { Component } from 'react';
import './App.css';
import ListInput from './components/listInput'
import ListItem from './components/listItem'
import SideBar from './components/sideBar'
import CommentsSection from './components/commentsSection'

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      items: [
        {
          id: 0, 
          text: 'First item',
          commentsCount: 0,
          comments: [],
          displayComment: false
        },
        {
          id: 1, 
          text: 'Second item',
          commentsCount: 0,
          comments: [],
          displayComment: false
        },
        {
          id: 2, 
          text: 'Third item',
          commentsCount: 0,
          comments: [
            'Very first comment',
            'Second comment',
          ],
          displayComment: false
        },
      ],
      nextId: 3,
      activeComment: [],
    }

  }
  // Add new item to the list
  addItem = inputText => {
    let itemsCopy = this.state.items.slice();
    itemsCopy.push({id: this.state.nextId, text: inputText});

    this.setState({
      items: itemsCopy,
      nextId: this.state.nextId + 1
    })
  }
  // Remove the item from the list: check if the clicked button id is match 
  removeItem = id =>
    this.setState({
      items: this.state.items.filter((item, index) => item.id !== id)
    })

  setActiveComment = (id) => this.setState({ activeComment: this.state.items[id] });

  addComment = (inputComment, activeCommentId ) => {
    // find item with id passed and select its comments array
     let commentCopy = this.state.items.find(item => item.id === activeCommentId)['comments']
      commentCopy.push({comments: inputComment})
     this.setState({
       comments: commentCopy
     })
   }

  render() {
    return (
      <div className='App'>
        <SideBar />
        <div className='flex-container'>
          <div className='list-wrapper'>
            <h1>Items</h1>
            <ListInput inputText='' addItem={this.addItem}/>
            <ul>
              {
                this.state.items.map((item) => {
                  return <ListItem item={item} key={item.id} id={item.id} removeItem={this.removeItem} setActiveComment={() => this.setActiveComment(item.id)}/>
                })
              }
            </ul>
          </div>
          <CommentsSection inputComment='' items={this.state.activeComment}/>
        </div>  
      </div>
    );
  }
}
export default App;

和我的评论部分组件：

commentsSection.js

import React from 'react';
import './commentsSection.css';
import CommentInput from './commentInput'
import CommentsItem from './commentsItem'

export default class CommentsSection extends React.Component {
    constructor(props){
        super(props);
        this.state = {value: this.props.inputComment};

        this.handleChange = this.handleChange.bind(this);
        this.handleEnter = this.handleEnter.bind(this);
        this.addComment = this.addComment.bind(this)
    }

    handleChange = event => this.setState({value: event.target.value})

    handleEnter(event) {
        if (event.charCode === 13 && event.ctrlKey) {
            this.addComment(this.state.value)
        } 
    }    

    addComment(comment) {
         // Ensure the todo text isn't empty
    if (comment.length > 0) {
          this.props.addComment(comment, this.props.activeComment);
          this.setState({value: ''});
        }   
    }

    render() {
        return (
            <div className='component-section'>
                <h1>{this.props.items.text}</h1>
                <ul>
                { this.props.items.comments &&
                    this.props.items.comments.map((comment, index) => <p key={index}>{comment}</p>)
                }
                </ul>
                <CommentsItem />
                {/*<CommentInput />*/}
                <div className='comment-input'>
                    <input type='text' value={this.state.value} onChange={this.handleChange} onKeyPress={this.handleEnter}/>
                </div>
            </div>
        )
    }
}

Answer 1

更改您的CommentSection组件addComment方法和handleEnter方法

    addComment(comment) {
        // Ensure the todo text isn't empty
        if (comment.length > 0) {
        // pass another argument to this.props.addComment
        // looking at your code pass "this.props.items"
          this.props.addComment(comment, this.props.items.id);
          this.setState({value: ''});
        }   
    }

   handleEnter(event) {
        if (event.charCode === 13 && event.ctrlKey) {
         // passing component state value property as new comment
          this.addComment(this.state.value)
        }
    }

更改您的App组件addComment方法

addComment = (inputComment, activeCommentId )=> {
   // find item with id passed and select its comments array
    let commentCopy = this.state.items.find(item => item.id === activeCommentId)['comments']
    // if you want to push comments as object 
    // but looking at your code this is not you want
    // commentCopy.push({comments: inputComment})
   // if you want to push comments as string
    commentCopy.push( inputComment)
    this.setState({
      comments: commentCopy
    })
  }

不知道如何处理我的项目中的输入

1 个答案: