Question

您可以在下面看到示例代码，它是典型的受控字段。

export default class NameForm extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

我可以理解，如果我在字段中键入任何文本，由于 setState 功能和值支持，该值将反映到文本字段中输入

但是，如果我将输入更改为以下。我删除了值道具。

<input type="text" onChange={this.handleChange} />

目前，如果我在字段中键入任何值，则该值仍然存在，但根据我对 React 的了解，输入将在 setState ，但道具值未设置，输入将在我看来清除，你能否详细解释一下？

Answer 1

我想你错过了这里的重点。调用setState后，将调用组件呈现 - 但这不会从头开始重新创建输入组件。内部反应将检查并仅应用实际DOM发生的更改。

在您的情况下，输入没有任何差异 - 因此它将保持不变。

此过程名为reconciliation，您可以阅读更多相关信息here。

Answer 2

您不应该设置value，只需设置defaultValue，就像这样

<input type="text" defaultValue={this.state.value}

然后handleChange将确保状态更新

关于反应控制文本字段的问题？

2 个答案: