08-更新表单状态

5.2.3　更新表单状态

现在已经可以监听事件并在组件监听更新和提交事件时进行观察，但还没有对数据做任何处理。此时，需要对事件进行一些处理来更新应用的状态。这正是React处理表单的关键方法：通过事件处理程序接收事件，然后使用来自这些事件的数据更新状态或属性。

状态和属性是React让使用者处理数据的两种主要方式。如果现在在表单中输入一些内容，什么也不会发生。乍一看，这似乎是个错误，但其实这正是React尽职尽责的表现。想想看：当用户更改输入的值时，用户正在变更DOM，而React的主要职责之一就是确保DOM与从组件创建的虚拟DOM保持同步。

由于没有更改虚拟DOM中的任何内容（没有更新状态），因此React不会对实际的DOM做任何更新。这是一个React实际发挥作用的很好的例子，它漂亮地完成了工作。如果还是能够更新表单值，使用者就无意间将自己置于“诡异”的境地，事物不同步而使用者需要回到老的做事方式（这正是React一开始改进的地方）。

要更新状态，开发者需要监听当输入值改变时React发出的事件。当此事件触发时，可以从中提取一个值并使用这个值更新组件的状态，这让开发者有机会控制更新过程的每个步骤。

让我们看看如何将这些付诸实现。代码清单5-5展示了如何设置事件处理程序来处理用户更改数据值时监听和更新组件状态。稍后将使用之前用到的 event.target 引用并访问其 value 属性来用 textarea 元素的值更新状态。

代码清单5-5　使用输入来更新组件状态（src/components/post/Create.js）

class CreatePost extends Component {
  constructor(props) {
    super(props);
    // Set up state
    this.state = {
      content: '',
    };
    // Set up event handlers
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handlePostChange = this.handlePostChange.bind(this);
 }
  handlePostChange(event) {
     const content = event.target.value;  ⇽--- 从DOM元素的value属性获取textarea元素的值（想要用什么更新state）
   this.setState(() => {  ⇽--- 使用该值设置state并使用新值更新它
       return {
           content,
        };
   });
  }
 handleSubmit() {
    console.log(this.state);  ⇽--- 要查看被更新的state，点击表单提交按钮并探查开发者控制台
  }
  render() {
    return (
       <div className="create-post">
                <button onClick={this.handleSubmit}>Post</button>
                <textarea
                    value={this.state.content}  ⇽--- 将新值提供给textarea元素
                    onChange={this.handlePostChange}
                    placeholder="What's on your mind?"
                />
       </div>
    );
  }
}