我有一个像这样的输入组件:
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 传递给输入,然后传递给验证等等。
该逻辑用于设置表单状态。表单状态已相应设置。我还有另一个组件,它依赖于表单状态并且工作完美。然而,输入组件并没有像我预期的那样更新。
在以下情况下我遇到问题:
- 空,初始输入 -> 点击触发 onBlur -> 验证失败 -> 输入组件更新
- 输入内容 -> 点击触发 onBlur -> 验证成功 -> 输入组件更新
- 再次从输入中删除文本 -> 点击触发 onBlur -> 验证失败 -> 输入组件不更新
- 再次向输入添加文本 -> 点击触发 onBlur -> 验证成功 -> 输入组件更新
这很奇怪,因为表单内的其他元素都会更新。如果我将 forceUpdate() 添加到 onBlur 函数,组件将按预期更新。然而,这个解决方案感觉很糟糕,特别是因为我不明白为什么我没有达到预期的效果。
在尝试解决这个问题时我想到的事情:
- 这是否是由于组件正在触发最终指向自身的更新过程导致的?我在这里想问的是,我将 setState 函数作为 prop 向下传递是否有问题?
- 在更新时,输入组件的处理方式是否有所不同?
编辑:
这是否是由于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
处理程序绑定(bind)到您的 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();
最终被绑定(bind)到事件目标调用。
关于javascript - 为什么父组件在设置状态时不更新输入组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38083557/