为什么父组件在设置状态时不更新输入组件？-Java 学习之路

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

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函数作为道具传递出来是一个问题吗？
在更新方面，输入组件的处理方式有所不同吗？

编辑：

这可能是因为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（）函数 . 我对么？这可能发生，因为我将当前状态传递给子函数，我可能在错误的地方使用对象引用，或类似的东西？

2 回答

您没有将 onBlur 处理程序绑定到您的反应类 . 特别是：

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(); 最终被调用绑定到事件目标 .

回复于 2024-04-24T15:45:39+08:00

0
我通过分配像这样的state.fields解决了这个问题：
```
state.fields = Object.create(fields);
```
我假设最初的字段指向原始状态对象引用，因此没有启动更新 . 然而，这真的只是我的猜测，如果有人能向我澄清这种行为，我将非常感激 .
回复于 2024-04-24T15:45:39+08:00

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

2 回答

相关问题