javascript - 使用 ReactJs，当从 props 发送的父对象发生变化时，如何更新我的表单字段？

Question

我正在使用 REactJs 动态创建一些表单字段。这些表单字段映射到文档对象。从视觉上看，它是一个三栏应用程序。左侧显示文档队列，其中包含许多可单击的文档图标，中间为字段，右侧为文档图像。可以有多个文档。每个文档都有与其关联的字段。如果用户在字段中输入值然后单击另一个文档。我希望为新文档或加载的保存值重置输入字段。

下面是我使用 DefaultValue 属性时尝试的最后一次尝试；我尝试从函数传递值。我也尝试过 value 属性，但它锁定了值，不允许用户更改它。

目前，我成功保存了文档队列及其字段的状态，但我无法让 UI 反射(reflect)我的状态对象:documentQueue。

我读过人们建议使用 value={state} 的地方，但这对我的状态对象不太适用。我的表单更加动态和复杂。

var Fields = React.createClass({
getInitialState: function () {
    return {                        
        currentDocumentIndex: 0,
        shouldUpdate: false,
        randomKey : 0
    };
},
componentWillReceiveProps: function (nextProps) {        
    console.log("compare props");
    console.log(nextProps.fields === this.props.fields);
    var forceRender = !(nextProps.fields === this.props.fields);
    //only change state if needed.
    if (forceRender) {
        if (!this.state.shouldUpdate) {
            this.setState({ shouldUpdate: true ,randomKey : Math.random() }, function () {
                console.log("should update fields state set");
                console.log(this.state.shouldUpdate);
            });
        }
    } else {
        if (this.state.shouldUpdate) {
            this.setState({ shouldUpdate: false , randomKey: Math.random() }, function () {
                console.log("should update fields state set");
                console.log(this.state.shouldUpdate);
            });
        }
    }
},
getDataType: function (datatype, fieldId) {        
    switch (datatype) {
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
            return <div class="col-sm-6"><input type="text" key={this.state.randomKey+1} className="form-control" id={fieldId} onChange={this.onValueChanged.bind(this)} value={this.props.fields[fieldId]}  /></div>
        case 5:
            return <div class="col-sm-6"><input type="text" key={this.state.randomKey+2} className="form-control" id={fieldId}  onChange={this.onValueChanged.bind(this)}  /></div>
        case 6:
            return <div class="col-sm-6"><input type="checkbox" key={this.state.randomKey+3} className="form-control" id={fieldId} value="true" onChange={this.onChecked.bind(this)} /></div>
        case 7:
            return <div class="col-sm-6"><textarea type="text" rows="5" key={this.state.randomKey+4} className="form-control" id={fieldId} onChange={this.onValueChanged.bind(this)}  ></textarea></div>
    }
},    
onChecked : function(event){        
},
onValueChanged : function(event){   
    this.props.onFieldChange(this.props.currentDocumentIndex, event.target.id, event.target.value);                
},
renderFields: function () {
    var fieldNames = [];        
    if (this.props.doctype == null) {
        console.log("fields are null");            
    } else {
        console.log("fields are valid from Field component");            
        for (var index = 0; index < this.props.doctype.Fields.length; index++)
        {                
            var inputField = this.getDataType(this.props.doctype.Fields[index].DataType, this.props.doctype.Fields[index].DocumentTypeFieldID);                
            fieldNames.push(<label className="control-label col-sm-6">{this.props.doctype.Fields[index].Name}</label>);                
            fieldNames.push(inputField);
        }
    }               
    return (            
            <form className="form-horizontal" role="form">
                <div className="form-group">
                    {fieldNames}
                </div>
            </form>            
    );        
},
render: function () {
    return (
        <div>
            {this.renderFields()}
        </div>
        );             
}

});

Answer 1

如果您想使用 React 管理 input 值，可以使用 value 属性。

但是，正如您所见，用户无法再直接编辑该字段。

要允许用户编辑，您还必须在字段上设置 onChange 并将传入的编辑写入某个位置，例如 state。

docs for ReactLink有一个很好的例子:

var NoLink = React.createClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({message: event.target.value});
  },
  render: function() {
    var message = this.state.message;
    return <input type="text" value={message} onChange={this.handleChange} />;
  }
});

此外，您可能只想使用 ReactLink。