5.使用this.setState()响应式的改变this.state中的数据。不要使用this.state.xxx改变 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

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

class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: 'hello',
            list: []
        }
    }
  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={ (e) => this.handleInputChange(e) }/>
          <button>提交</button>
        </div>
        <ul>
            <li>学英语</li>
            <li>学React</li>
        </ul>
      </Fragment>
    );
  }

  handleInputChange = (e) => {
    // console.log(e.target.value)

    // 在react中，不能使用this.state.xxx改变组件中的数据。这样的话，数据虽然发生变化，但页面不会自动更新。
    // this.state.inputValue = e.target.value
    // console.log(this.state.inputValue)

    // 必须调用this.setState()方法--响应式的改变this.state中的数据。
    this.setState({
      inputValue: e.target.value
    })
  }
}

export default TodoList;

总结 ：

 1. 事件绑定： onChange = { (参数) => this.handleInputChange(参数) }

 2. 改变state中的数据：一定要用 this.setState()方法。这样是响应式的改变数据：数据变化，页面会自动更新。
    
    this.state.xxx 只是会改变数据，但是页面不会自动更新。

    // this.setState()的参数可以是一个函数。函数的参数是prevState,props
    handleBtnClick = () => {
        this.setState((prevState) => ({
          list: [...prevState.list, prevState.inputValue],
          inputValue: ''
        }))
    };
⚠️ **GitHub.com Fallback** ⚠️