Question

我正在使用React 15.1.0开发网站，并且在我的React组件中创建输入元素时遇到了意外行为。

我有一个React组件，它有一个Step机制，用户填写表单，进入下一步，填写另一个表单等。

我在包含如下形式的对象的数组中定义了这些步骤：

this.steps = [{
    stepHeading: 'Step 1',
    stepDescription: 'Fill out the form part 1',
    stepFormMarkup: (<div className="row row--highlighted ">
                        <div className="column form">
                            <fieldset className="forms js-forms forms--columns">
                                <FormInput
                                id="input_SSC"
                                    type="text"
                                    required={true}
                                    label={this.labels.SSCInputLabel}
                                    validation={email}
                                    placeholder={this.labels.SSCInputLabel}
                                    onChange={this.onEmailChanged}
                                />
                            </fieldset>
                        </div>
                    </div>)
},
{
    stepHeading: 'Step 2',
    stepDescription: 'Fill out the form part 2',
    stepFormMarkup: (<div className="row row--highlighted ">
                        <div className="column form">
                            <fieldset className="forms js-forms forms--columns">
                                <FormInput
                                    id="input_email"
                                    type="text"
                                    required={true}
                                    label={this.labels.EmailInputLabel}
                                    validation={email}
                                    placeholder={this.labels.EmailInputPlaceholder}
                                    onChange={this.onEmailChanged}
                                />
                                <FormInput
                                    id="input_mobile"
                                    type="text"
                                    required={false}
                                    label={this.labels.MobileInputLabel}
                                    validation={phone}
                                    placeholder={this.labels.MobileInputPlaceholder}
                                    onChange={this.onMobileChanged}
                                />
                            </fieldset>
                        </div>
                    </div>)
}];

我有一个按钮单击事件，它将增加状态属性currentStep，然后触发组件更新，然后应该从我的this.steps数组的下一步中呈现标记。

无论我输入第1步的输入字段，都会自动插入第2步的第一个输入字段。

我无法在网上找到任何解释有谁知道React是否会以某种方式保持＆＃34;状态＆＃34;上一个实例并将其与新实例一起错误？

以下是我的FormInput组件的外观：

const FormInput = React.createClass({
    this.id: 'input_id_missing',

    propTypes: {
        label: React.PropTypes.string,
        placeholder: React.PropTypes.string,
        type: React.PropTypes.string,
        validation: React.PropTypes.func,
        onChange: React.PropTypes.func,
        required: React.PropTypes.bool
    },

    getInitialState() {
        return {
            validation: {}
        };
    },

    handleInputChanged(event) {
        this.validate(event.target.value);
    },

    validate(value) {
        let validation = this.props.validation && this.props.validation(value);
        this.setState({
            validation: validation
        });

        if (typeof this.props.onChange === 'function') {
            this.props.onChange(value, validation);
        }

        return validation;
    },

    render() {
        return (
            <div className={cx('form__field', {
                'form__field--valid': (this.state.receivedInput && this.state.validation.valid),
                'form__field--notvalid': (this.state.receivedInput && !this.state.validation.valid),
                'form__field--labeled': this.props.label,
                'form__field--not-labeled': !this.props.label
            })}>
                {this.props.label && (<label className="form__text form__label" htmlFor={this.props.id || this.id}>{this.props.label}</label>)}
                {this.props.required && (<label className="form__text form__text--error form__label form__label--required" htmlFor={this.props.id || this.id}>( Required )</label>)}
                <input id={this.props.id || this.id} type={this.props.type || 'text'} placeholder={this.props.placeholder} className="form__input form__text" onChange={this.handleInputChanged}/>
            </div>
        );
    }
});

Answer 1

根据ID：

尝试为您的输入提供key属性

<input key={"key_" + (this.props.id || this.id)} ...

ReactJS默认情况下在新输入

1 个答案: