javascript - ReactJS 先前输入的值在新输入中默认设置

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 是否以某种方式保留了前一个实例的“状态”并将其误认为是新实例？

这是我的 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)} ...