[React] 6.React - 实现TodoList新增功能

1. 将列表中的数据放到数组中：

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

2. 循环数组中的数据，并展示到页面上：

render() {
        return(
            <Fragment>
            <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
            <ul>
                {
                    this.state.list.map((value,index) => {
                        return <li key= {index}>{value}</li>
                    })
                }
            </ul>
            </Fragment>
                
        )
    }

3. 实现在输入框中点回车，输入的内容显示到列表中：
   1） 在input中绑定一个事件：onKeyUp

<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)}/>

2) 写函数：

 // 松开键盘会触发该事件
    handleKeyUp(e) {
        // 判断是不是点的回车键
        if (e.keyCode === 13) {
            const list = [...this.state.list, this.state.inputValue];
            this.setState({
                list: list
            })
        }
    }

结果如下：

回车后，输入框中的数据加入到了列表中

完整代码如下：TodoList中

import React, {Component, Fragment} from 'react';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            list: ['learn React', 'learn Component']
        }
    }
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    // 松开键盘会触发该事件
    handleKeyUp(e) {
        // 判断是不是点的回车键
        if (e.keyCode === 13) {
            const list = [...this.state.list, this.state.inputValue];
            this.setState({
                list: list
            })
        }
    }

    render() {
        return(
            <Fragment>
            <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bind(this)}/>
            <ul>
                {
                    this.state.list.map((value,index) => {
                        return <li key= {index}>{value}</li>
                    })
                }
            </ul>
            </Fragment>
                
        )
    }
}

export default TodoList;