以React形式，为什么我们在输入标签中设置（例如）value = {this.state.task}？

Question

我不明白为什么当它只是一个空字符串时为什么要设置value = {this.state.task}，以及数据流从输入值到状态到底是如何精确的。

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

我得到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

我不明白为什么我们将value = {this.state.task}设置为空字符串时的原因，以及数据流从输入值到状态的准确程度。当我们第一次设置...

Answer 1

因为value正在设置...以及输入值。通过执行此value={this.state.task}，基本上可以将输入与组件的状态以及React组件的生命周期连接起来。因此，基本上，无论何时只要您更改了组件状态，即可从任何地方（甚至以编程方式）获得输入，React都将能够正确更新输入，并且不会发生任何错误或奇怪的事情。