处理受控组件中的默认值的最佳方法是什么？

Question

我有一个用于插入和编辑用户的 UserModal。在我的<input> 元素上，我都指定了使用状态的value 道具和使用用户名道具（如果它不为空）的defaultValue 道具。

<input
  type="text"
  className="form-control"
  id="username"
  tabIndex={1}
  required={true}
  onChange={this.handleOnUsernameChange}
  value={this.state.username}
  defaultValue={this.props.username || ''} />

UserModal 包含一个 number 类型的输入，其中包含 value 和 默认值道具。输入元素必须是受控的或 不受控制（指定 value 道具或 defaultValue 道具， 但不是两者都有）。决定使用受控输入还是不受控输入 元素并删除这些道具之一。

如果我使用上面的<input> 元素 sn-p，那么我会在控制台中打印出警告/错误消息。处理受控组件需要默认值的情况的最佳实践是什么？或者使用不受控制的组件更容易/更好地做到这一点？

Answer 1

使用受控组件。你可以在 state 中设置你的默认 prop。

this.state = {
   username: this.state.username || this.props.username
};

this.onChange = this.handleOnUsernameChange.bind(this);

<input
   type="text"
   className="form-control"
   id="username"
   tabIndex={1}
   required={true}
   onChange={this.handleOnUsernameChange}
   value={this.state.username}
/>

handleOnUsernameChange = e => {
   this.setState({
      username: e.target.value
   });
   console.log(e.target.value);
}