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，如果我使用值，则字段变为只读，并且使用defaultValue不会打印任何内容。

我正在使用与流星的反应。我已尝试在this.props.user语句之前在render方法中记录return，并打印该对象。

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中的反模式。因为子组件的初始状态仅被调用一次，所以从父项到prop值this.props.user.first_name的更改不会导致子项状态的任何更改。如果用例是明确设置一个你不希望或期望在组件生命周期中改变的初始值（尽管那时它不是一个很好的模式），这是很好的，但如果你确实希望初始值是可变的你有两个选择。

选项一：将状态置于可能属于的父组件中。然后子组件应该接收并呈现任何发送它的道具。对初始值的更改在父组件状态中处理，props被视为不可变，并且所有内容都保持同步。

选项二：如果由于某种原因您需要从道具中确定状态并且您还希望这些道具发生变化，您可以使用componentWillReceiveProps(nextProps)生命周期方法来让一切保持同步。这样您就可以针对this.props检查nextProps，并在必要时进行任何状态更改：

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

这是指向DOCS的链接以供进一步参考。

defaultValue的反应在流星中不起作用

1 个答案: