javascript - 为什么父组件在设置状态时不更新输入组件？

Question

我有一个像这样的输入组件:

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() 函数有关。我对么？发生这种情况是否是因为我将当前状态传递给子函数，并且我可能在错误的位置使用了对原始对象的引用，或者类似的东西？

Answer 1

您没有将 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)到事件目标调用。