【2】前端实习：react初学（todolist新增列表添加功能，详细逻辑阐述含代码）

步骤：

3.新增列表添加功能：

【逻辑】：

1. 首先，render(){}函数会返回return（）一个模块[jsx块]。<div></div>里写页面内容，有简单的输入元素，按钮元素和列表元素。
2. 然后, 创建一个构造函数，定义一个数据项state，在里面定义  保存列表数据的数组list; 以及获取键盘输入值inputvalue。
3. 其次，给输入元素<input>定义一个方法，handleInputChange,并绑定引用组件对象的this，便于handleInputChange(){}函数里引用

的对象始终是TodoList组件对象。用this.setstate({})方法获取修改/更新的状态，这里是获取到用户键盘输入的值inputvalue: e.target.value。

4. 接着，值获取到了，应该实现点击按钮，把输入的值显示到列表中。在<button>标签里定义一个方法 handleBtnClick，同理绑定引用组件对象的this。在handleBtnClick(){}方法里用this.setstate（{}）方法获取并更新从inputvalue得到的数据，并将原来的列表数据队列保存，添加新的值。this.state.list.map((item) =>{ return <li>{item}</li>，放在列表语句里，用map来遍历list数组的值。

5.最后，在点击了按钮后，输入框的值清空。关键代码：value={this.state.inputvalue}。

import React from 'react';

class TodoList extends React.Component {

    //ES6语法，创建一个构造函数
    constructor(props){
        super(props);
        //创建一个数据项
        this.state = {
            list:[],
            inputvalue:''
        }
    }

    handleBtnClick(){
    this.setState({
        list:[ ...this.state.list,this.state.inputvalue],
        inputvalue:''//把inputvalue值清空
    })
    }

    handleInputChange(e){
        this.setState({
           inputvalue: e.target.value
       })
    }

    /*原来onClick={this.handleBtnClick}中的this引用的是组件TodoList对象。
    而handleBtnClick函数引用的this是指向button的。
    通过绑定最外层的引用组件的this，将handleBtnClick方法也指向组件对象。
    */
    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputvalue} onChange={this.handleInputChange.bind(this)}/>
                    <button onClick={this.handleBtnClick.bind(this)}>add</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item) =>{
                            return <li>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }

}
export default TodoList;