react开发todoList――添加

通过create-react-app来创建项目，
目前只做了最简单的添加和删除操作，涉及知识点：组件之间传值、事件绑定。
项目目录：

1551261485(1).jpg

1551261564(1).jpg

大致分为三个组件：
App.js
topHeader.js
middleContent.js

在头部的输入框中输入内容，点击确定，在待完成事件中显示输入的内容。
即：在头部的组件中输入，在内容组件中显示
在这里就涉及到组件之间的传值问题，即，topHeader.js与middleContent.js两个非父子关系的组件

方法一：

因为两组件之间有相同的直接父组件，所以，我们可以通过将数据从一个子组件传递给父组件，然后再由父组件传值给另一个子组件（当然，页面逻辑非常复杂的情况下，这样会很麻烦，但目前只会这一种）。

添加

首先，在头部的子组件中获取到输入框的值，在点击按钮时调用父组件的方法进行传值。
topHeader.js

<button className="submitBtn" onClick={this.handleAdd.bind(this)}>确定</button>

handleAdd() {
    if(this.props.onSubmit){
      this.props.onSubmit(this.state.inputValue)
    }
    this.setState({
      inputValue:''
    })
  }

父组件App.js

<TopHeader onSubmit={this.handleSubmit.bind(this)}/>

handleSubmit(value) {
    var list = [...this.state.list, value];
    this.setState({
      list:list
    })
  }

然后，父组件再将 topHeader.js传来的数据传递给middleContent.js，子组件通过props来接收数据
App.js

<MiddleContent content={this.state.list}/>

middleContent.js

<ul>
      {
          this.props.content.map((item, index) => {
            return (
              <li key={index} className="middle-li">
                {item}
              </li>
            )
          })
       }
</ul>

通过遍历数据将其显示在页面上