React16.4 快速上手 --- （1）编写todolist功能以及新增列表项

import React from 'react';

class ToDoList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            list: [],
            inputValue: '',
        };
    }

    handleInputChange(e){
      this.setState({
          inputValue: e.target.value
      })
      // console.log(e.target.value)
    }

    handleBtnClick(){
        this.setState({
                list: [...this.state.list, this.state.inputValue],
                inputValue: '',
            })
    }

    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>  // step1
                    <button onClick={this.handleBtnClick.bind(this)}>add</button> // step2
                </div>
                <ul>
                    {this.state.list.map((item, index)=> {
                        return <li key={index}>{item}</li>
                    })} // step3
                </ul>
            </div>
        );
}
}
export default ToDoList;

实现步骤：

step1 : 在输入框内输入文字，触发onChange事件，调用与ToDoList组件绑定的handleInputChange方法，更新this.state.inputValue的值，输入框内value值等于当前this.state.inputValue的值，显示在输入框中；

step2: 点击名为add的按钮，触发onClick事件，调用与ToDoList组件绑定的handleBtnClick方法, 在this.state.list中增加this.state.inputValue的值，将新的list中的所有数据显示在无序列表中，再更新this.state.inputValue的值为''，对step1中显示在输入框中的文字做清除动作；

step3: map()方法遍历list中的数据，显示在无序列表中，渲染到页面