[React] 5.React 中数据驱动的设计思想和事件绑定

想要达到的效果是在input中输入数据之后点回车，会添加到下面的列表中：

React中是通过数据来操作页面

1. 在构造函数中定义数据：把要定义的两项数据（input中的内容和列表）放到this.state中，如下：

constructor(props) {
        super(props);
        // 在组件中创建了两个数据，数据一定定义在state中
        this.state = {
            inputValue: 'hello world',
            list: []
        }
    }

2. 将inputValue赋值给：

<input value={this.state.inputValue}/>

注：如果想把JS变量的值赋给标签，JSX语法中则需要在值的最外面加花括号{}
此时hello world赋值成功

3. 此时的值是不可改变的，若想改变值，则需要在input框上绑定一个事件：onChange,并且执行函数

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

定义函数：state中的值需要用setState去改变

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

如此就可以改变输入框中的值

完整代码如下：TodoList.js中

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

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'hello world',
            list: []
        }
    }
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }
    render() {
        return(
            <Fragment>
            <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
            <ul>
                <li>learn React</li>
                <li>learn Component</li>
            </ul>
            </Fragment>
                
        )
    }
}

export default TodoList;