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

我不明白为什么当它只是一个空字符串时为什么要设置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