Reactjs 在React表单中，为什么要在输入标记中设置（例如）value={this.state.task}？

我无法理解为什么我们设置值={this.state.task}而它只是一个空字符串，以及数据流是如何从输入值到状态的

当我们第一次设置值时，它基本上是一个空字符串。但当我试图实际设置value=''时，输入字段在呈现页面上无法正常工作

我得到，一旦更改，我们就将状态设置为相应的名称和值，这就是数据如何流入状态的。但是，当我们再次设置value=''时，为什么它不起作用呢

import React，{Component}来自'React'；
从“uuid/v4”导入uuid；
导出类NewTodoForm扩展组件{
建造师（道具）{
超级（道具）
此.state={
任务：“
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
这是我的国家({
[e.target.name]：e.target.value
})
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.createTodo（{…this.state，id:uuid（）}）；
this.setState（{task:'}）；
}
render（）{
返回(
新待办事项
添加待办事项
)
}
}
导出默认NewTodoForm

因为

值

正在设置。。。那么输入的值。通过这样做

value={this.state.task}

基本上就是将您的输入与组件的状态和组件的生命周期连接起来。因此，基本上，只要您更改组件的状态，并且该状态包含来自任何地方的输入（甚至是以编程方式），React就能够正确地更新输入，并且不会发生任何错误或奇怪的事情

在文章中，这一点解释得很好。他们正在做这个受控组件

其值由React以这种方式控制的输入表单元素称为“受控组件”

。。。因此，React组件的状态是唯一的“真实来源”，这意味着防止奇怪的bug和不希望出现的行为

由于在表单元素上设置了

value

属性，因此显示的值将始终是

this.state.value

，从而使React状态成为真相的来源

---

只有一个真理来源而不是很多，这永远是一个好的实践。在这种情况下，如果您让输入的值与组件的状态不同，那么您就产生了不止一个真实来源，从而使您的应用程序暴露于错误。

因为

值

正在设置。。。那么输入的值。通过这样做

value={this.state.task}

基本上就是将您的输入与组件的状态和组件的生命周期连接起来。因此，基本上，只要您更改组件的状态，并且该状态包含来自任何地方的输入（甚至是以编程方式），React就能够正确地更新输入，并且不会发生任何错误或奇怪的事情

在文章中，这一点解释得很好。他们正在做这个受控组件

其值由React以这种方式控制的输入表单元素称为“受控组件”

。。。因此，React组件的状态是唯一的“真实来源”，这意味着防止奇怪的bug和不希望出现的行为

由于在表单元素上设置了

value

属性，因此显示的值将始终是

this.state.value

，从而使React状态成为真相的来源

---

只有一个真理来源而不是很多，这永远是一个好的实践。在这种情况下，如果您让输入的值与组件的状态不同，那么您就产生了不止一个事实来源，从而使您的应用程序暴露于bug。

我想我明白了。所以基本上，数据流是这样的：

value

的初始值是一个空字符串（从状态）。2） 然后用户开始键入，调用

onChange（）

，并将状态更新为新值

value

。我想我真正的问题是，当用户在输入字段中键入时，该值现在是来自状态还是他们在输入字段中键入时临时存储的内容？我想我的困惑也来自于我对输入字段如何工作的理解。据我所知，它只在第一次加载时从状态中获取值，然后用户将其输入到输入字段中，然后推送到状态。每次用户输入一个字符时，从状态中获取该值基本上就是每次刷新吗？我想我得到了。所以基本上，数据流是这样的：

value

的初始值是一个空字符串（从状态）。2） 然后用户开始键入，调用

onChange（）

，并将状态更新为新值

value

。我想我真正的问题是，当用户在输入字段中键入时，该值现在是来自状态还是他们在输入字段中键入时临时存储的内容？我想我的困惑也来自于我对输入字段如何工作的理解。据我所知，它只在第一次加载时从状态中获取值，然后用户将其输入到输入字段中，然后推送到状态。用户每次键入字符时，是否每次都会刷新以从状态获取该值？

import React, { Component } from 'react';
import uuid from 'uuid/v4';

export class NewTodoForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
       task: ""
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(e){
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  handleSubmit(e){
    e.preventDefault();
    this.props.createTodo({ ...this.state, id: uuid() });
    this.setState({ task: "" });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor='task'>New Todo</label>
          <input
            type='text'
            placeholder='New Todo'
            id='task'
            name='task'
            // why is this {this,state.task} ?
            value={this.state.task}
            onChange={this.handleChange}
          />
          <button>Add Todo</button>
        </form>
      </div>
    )
  }
}

export default NewTodoForm