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

Question

I'm working under the to-do list project and have got a problem with adding a comment to my list item. This is what I have right now:

App flow

After adding a list item you should be able to click in this item and a new window with comments will appear. In the comments section, comments should be added with Ctrl+Enter combination.

I've got a problem with adding comments to the list item (they should be added to the "comments" array of a particular list item).

Could you please explain what I'm doing wrong and why my comments aren't adding.

UPDATE: I've updated my code but the following mistake appears when I press Ctr+Enter to add a comment: [Error] ( http://joxi.ru/Q2KR1G3U4lZJYm ) I've tried to bind the addItem method but no result. What's wrong with the addItem method?

Here is my main component:

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;

and my Comments Section component:

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

Change your CommentSection component addComment method and handleEnter method

    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)
        }
    } 

Change your App Component addComment method

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
    })
  }