javascript - react 的默认值在 meteor 中不起作用

Question

我正在尝试解决这个问题，但我不知道为什么这不起作用

<input type="text" id="first_name" name="first_name" className="form-control" defaultValue={this.props.user.first_name}  required/>

但这可行

<input type="text" id="first_name" name="first_name" className="form-control" value={this.props.user.first_name}  required/>

区别在于value和defaultValue，如果我使用value，该字段将变为只读，并且使用defaultValue不会打印任何内容。

我正在使用与 meteor react 。我尝试在 return 语句之前在 render 方法中记录 this.props.user 并打印该对象。

Answer 1

当您将 this.props.user.first_name 分配给 value 属性时，并不是输入字段变为只读，而是您从未处理过什么当该值发生变化时就会发生。 React 只是用您每次直接分配给它的值重新渲染它。

如果您希望使字段可编辑并具有默认用户名值，您可能应该维护并了解输入的状态。

例如:

// Initialize some component state in either your constructor or getInitialState function
constructor(props){
  super(props);    

  this.state = {userInput: this.props.user.first_name};
}


// Have a function that updates state when your input changes
onInputChange(event) {
  this.setState({ userInput: event.target.value });
}


// Then set the value equal to your userInput state and add an onChange 
// prop to the input tag in your render method.
render() {
  return (
  ...
  <input 
    type="text" 
    id="first_name" 
    name="first_name" 
    className="form-control" 
    value={this.state.userInput}
    onChange={this.onInputChange.bind(this)} />
  )
} 

然后，该字段的值将初始化为通过 this.props.user.first_name 提供的值，同时仍保持可编辑状态。

编辑:

正如评论中所指出的，虽然有效，但这实际上是 React 中的反模式。由于子组件的初始状态仅被调用一次，因此从父组件到 this.props.user.first_name 的 prop 值的更改不会导致子组件状态发生任何变化。如果用例是明确设置您不希望或期望在组件生命周期期间更改的初始值(尽管即使如此，这也不是一个很好的模式)，但如果您确实希望初始值是mutable 你有两个选择。

选项一:将状态带入它可能所属的父组件中。然后，子组件应该接收并渲染发送给它的任何 props。对初始值的更改在父组件状态中处理， Prop 被视为不可变，并且一切都保持同步。

选项二:如果出于某种原因，您都需要从 props 确定状态，并且您还希望这些 props 发生变化，则可以使用 componentWillReceiveProps(nextProps) 生命周期方法使一切保持同步。这将允许您根据 nextProps 检查 this.props 并在必要时进行任何状态更改:

componentWillReceiveProps(nextProps) {
  if(nextProps.user.first_name !== this.props.user.first_name){
    this.setState({
      userInput: nextProps.user.first_name
    });
  }
}

这里是 DOCS 的链接以供进一步引用。