Question

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

<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的输入，其中值和 defaultValue道具。输入元素必须是受控的或不受控制（请指定值属性或defaultValue属性，但不能同时使用）。确定使用受控输入还是非受控输入元素并删除其中一个道具。

如果我从上方使用<input>元素片段，那么我会在控制台中打印警告/错误消息。在受控组件需要默认值的情况下，最佳做法是什么？还是使用不受控制的组件更容易/更好地做到这一点？

Answer 1

使用受控组件。您可以将默认道具设置为该状态。

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);
}

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

1 个答案: