<center>React实现简易TodoList</center>

class TodoList extends Component {
/**render函数返回的JSX模板最外层只能由一个包裹元素
 * 使用Fragment做占位符，只起包裹作用，并不会渲染成DOM元素 */
    render() {
        return (
            <Fragment>
                <div>
                    <input />
                    <button>submit</button>
                </div>
                <ul>
                    <li>one</li>
                    <li>two</li>
                </ul>
            </Fragment>
        )
    }
}

export default TodoList

---

响应式设计和数据绑定

响应式：数据驱动视图，数据一变化，页面就会跟着变化

双向数据绑定：通过value属性和onChange方法，实现双向数据绑定

//在state中定义数据
constructor(props) {
    super(props)
    this.state = {
        inputValue: 'hello'
    }
}
//在JSX中进行数据绑定
<input 
    value={this.state.inputValue} 
    onChange={this.handleInputChange.bind(this)} 
/>
//通过onChange方法实现数据双向绑定
handleInputChange(e) {
    this.setState({
        inputValue: e.target.value
    })
}

---

实现增加和删除功能

<ul>
    {
        this.state.list.map((item, index) => {
            return <li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li>
        })
    }
</ul>
handleBtnClick() {
    this.setState({
        list: [...this.state.list, this.state.inputValue],
        inputValue: ''
    })
}
handleItemClick(index) {
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
        list: list
    })
}