[英]Does state update of parent component assures remount of child component in ReactJS?
[英]Why parent component does not update input component when setting state?
我有一个像这样的输入组件:
let InputBasic = React.createClass({
displayName: 'InputBasic',
path: '',
componentWillMount: function () {
this.path = this.props.storePath + '.' + this.props.storeIndex;
},
getInitialState: function () {
return { };
},
getError: function () {
if (!Array.isArray(this.props.formErrorFields)) {
return false;
};
__this = this;
let hasError = false;
this.props.formErrorFields.forEach(function (index) {
if (__this.props.name == index.name) {
hasError = true;
return;
}
});
return hasError;
},
sendToValidation: function() {
if (this.props.rules) {
bom.form.validateInput(
/* Vars here */
);
}
},
getClassName: function () {
if(this.getError()) {
return 'input-basic has-error';
}
else {
return 'input-basic';
}
},
onBlur: function () {
this.sendToValidation();
},
handleChange: function (event) {
this.setState({ value: event.target.value });
},
render: function () {
return React.createElement('input',
{
type: this.props.type,
placeholder: this.props.placeholder,
style: this.props.style,
onChange: this.handleChange,
onBlur: this.onBlur,
className: this.getClassName()
}
);
}
});
这个想法是验证模糊的输入字段。 如果输入未通过验证,则更改包含的表单状态。 表单setState()函数作为prop传递给输入,然后传递给验证,依此类推。
逻辑适用于设置表单状态。 相应地设置表单状态。 我还有另一个组件,它取决于表单状态,并且完美地工作。 但是,输入组件未按我的预期更新。
在以下场景中我遇到了问题:
这是特殊的,因为表格内的其他元素都会更新。 如果我将forceUpdate()添加到onBlur函数,则组件会按预期更新。 然而,这个解决方案感觉很难,特别是因为我不明白为什么我没有得到预期的效果。
在尝试解决这个问题时,我想到的是:
编辑:
这可能是因为onChange函数引起的吗? 它不在示例中,因为SO唠叨了太长的代码示例。
更多编辑:
显然,如果启动子项更新,我将如何将值分配给状态会有所影响。
这是我用来更新输入父级状态的函数:
bom.form = {
getErrorField: function (fields, name, text) {
let newFields = fields;
if (fields[name]) {
newFields[name].hasError = true;
newFields[name].errorText = text;
}
return newFields;
},
validateInput: function (inputValue, inputName, inputRules, setFormState, formFields) {
let fields = formFields;
if (!inputValue && inputRules.required) {
let text = 'This field is required.';
fields = this.getErrorField(formFields, inputName, text);
}
state = {};
state.fields = fields;
return setFormState(state);
}
};
所以,调用validateInput()我设置输入的父组件状态。
这不会在输入组件中启动更新。 但是,如果我将示例中的state.fields赋值更改为:
state.fields = { password: {}, username: {}}
它根据需要启动更新。 当然,在这个例子中,状态不是我想要的,这仅仅是为了表达目的。
奇怪的是,在这两种情况下,另一个不同的子组件(我称之为fieldMessage)会更新。 它以这种方式呈现:
return React.createElement('p', null, this.getText());
getText()函数返回父组件状态,它指向右侧字段。
所以我已经得出结论,我的问题有关于如何将状态对象分配给setState()函数。 我对么? 这可能发生,因为我将当前状态传递给子函数,我可能在错误的地方使用对象引用,或类似的东西?
您没有将onBlur
处理程序绑定到您的react类。 尤其是:
render: function () {
return React.createElement('input',
{
type: this.props.type,
placeholder: this.props.placeholder,
style: this.props.style,
onChange: this.handleChange,
onBlur: this.onBlur.bind(this),
className: this.getClassName()
}
);
}
这是因为, this.sendToValidation();
最终被称为绑定到事件目标。
我通过分配像这样的state.fields解决了这个问题:
state.fields = Object.create(fields);
我假设最初的字段指向原始状态对象引用,因此没有启动更新。 然而,这真的只是我的猜测,如果有人能向我澄清这种行为,我将非常感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.