Javascript 使用ReactJs，当从道具发送的父对象发生更改时，如何更新表单字段？

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

下面是我最后一次尝试使用DefaultValue属性；我试图从函数中传入值。我还尝试了value属性，但它锁定了值，不允许用户更改它

目前，我成功地保存了文档队列及其字段的状态，但我无法让UI反映我的状态对象：documentQueue

我读过人们建议使用value={state}的地方，但这对我的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>
        );             
}

var Fields=React.createClass({
getInitialState:函数（）{
返回{
currentDocumentIndex:0，
shouldUpdate:false，
随机键：0
};
},
componentWillReceiveProps:function（nextProps）{
日志（“比较道具”）；
log（nextrops.fields===this.props.fields）；
var forceRender=！（nextrops.fields===this.props.fields）；
//仅在需要时更改状态。
如果（强制渲染）{
如果（！this.state.shouldUpdate）{
this.setState（{shouldUpdate:true，randomKey:Math.random（）}，函数（）{
log（“应更新字段状态集”）；
console.log（this.state.shouldUpdate）；
});
}
}否则{
if（this.state.shouldUpdate）{
this.setState（{shouldUpdate:false，randomKey:Math.random（）}，函数（）{
log（“应更新字段状态集”）；
console.log（this.state.shouldUpdate）；
});
}
}
},
getDataType:函数（数据类型，字段ID）{
交换机（数据类型）{
案例0：
案例1：
案例2：
案例3：
案例4：
返回
案例5：
返回
案例6：
返回
案例7：
返回
}
},    
onChecked:函数（事件）{
},
onValueChanged:函数（事件）{
this.props.onFieldChange（this.props.currentDocumentIndex、event.target.id、event.target.value）；
},
renderFields:函数（）{
var fieldNames=[]；
if（this.props.doctype==null）{
log（“字段为空”）；
}否则{
log（“字段在字段组件中有效”）；
for（var index=0；index

---

}))

如果要使用React管理

输入

值，可以使用

值

属性

但是，正如您所看到的，用户不能再直接编辑该字段

要允许用户编辑，还必须在字段上设置

onChange

，并将传入的编辑写入某个位置，例如

state

我们有一个很好的例子：

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

var NoLink=React.createClass({
getInitialState:函数（）{
返回{message:'Hello！'}；
},
handleChange:函数（事件）{
this.setState（{message:event.target.value}）；
},
render:function（）{
var message=this.state.message；
返回；
}
});

---

此外，您可能只想使用

ReactLink

如果您想使用React管理

输入

值，您可以使用

值

属性

但是，正如您所看到的，用户不能再直接编辑该字段

要允许用户编辑，还必须在字段上设置

onChange

，并将传入的编辑写入某个位置，例如

state

我们有一个很好的例子：

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

var NoLink=React.createClass({
getInitialState:函数（）{
返回{message:'Hello！'}；
},
handleChange:函数（事件）{
this.setState（{message:event.target.value}）；
},
render:function（）{
var message=this.state.message；
返回；
}
});

---

另外，您可能只想使用

ReactLink

我正在使用Reactjs.net，我还不知道如何添加外部组件。onChange在onBlur不允许我更改value属性的情况下工作。我现在只需要想办法让它工作。您的简单示例运行良好，但当我尝试以下操作时，该值不会更新value={this.getFieldValueFrom（this.props.currentDocumentIndex，fieldId）}快速遍历不会产生代码的任何架构错误。我会在

getFieldValueFrom

和

setFieldValueFrom

中尝试一个

debugger

语句，看看结果如何。这个答案以及此链接帮助我解决了这个问题。我想在父道具更改时重置字段。我在输入元素上使用了一个键值来实现这一点。我还使用了componentWillReceive