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

时间:2016-06-28 18:20:41

标签: javascript reactjs

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

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

2 个答案:

答案 0 :(得分:0)

您没有将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 最终被调用绑定到事件目标。

答案 1 :(得分:0)

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

state.fields = Object.create(fields);

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