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传递给输入，然后传递给验证等等。

逻辑适用于设置表单状态。相应地设置表单状态。我还有另一个组件，它取决于表单状态，并且完美地工作。但是，输入组件未按我的预期更新。

在以下场景中，我遇到了问题：

空，初始输入 - ＆gt;点击以触发onBlur - ＆gt;验证失败 - ＆gt;输入组件更新
输入输入 - ＆gt;点击以触发onBlur - ＆gt;验证成功 - ＆gt;输入组件更新
从输入中再次删除文字 - ＆gt;点击以触发onBlur - ＆gt;验证失败 - ＆gt;输入组件不会更新
再次添加文字到输入 - ＆gt;点击以触发onBlur - ＆gt;验证成功 - ＆gt;输入组件确实更新

这很奇怪，因为表格内的其他元素都会更新。如果我将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

您没有将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();

这是因为SELECT TOP 100 DTime, PEvent, FName, LName FROM EventLogs最终被调用绑定到事件目标。

Answer 2

我通过分配像这样的state.fields解决了这个问题：

state.fields = Object.create(fields);

我假设最初的字段指向原始状态对象引用，因此没有启动更新。然而，这真的只是我的猜测，如果有人能向我澄清这种行为，我将非常感激。

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

2 个答案: