ReactJS新しい入力で既定で前回入力の値が設定されています

Question

React 15.1.0を使用してWebサイトを開発していて、Reactコンポーネントに入力要素を作成するときに予期しない動作が発生しています。

Iは、ユーザーがフォームを記入するステップ機構を有する次のステップに進む反応させコンポーネントは、別のフォームに記入しているなど、私がオブジェクトを含む配列で定義された手順は次のように形成された

この：

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>) 
}]; 

私はその後、その後、私のthis.steps配列内の次のステップからマークアップをレンダリングする必要があるコンポーネントの更新をトリガーする国有財産currentStepを増加させるボタンクリックイベントを持っています。

何が起こることは何でも私はステップ1からの入力フィールドに入力するステップ2の最初の入力フィールドに挿入自動であろうということです。

私はオンラインで説明を見つけることができませんでした。
Reactが何らかの形で前のインスタンスの「状態」を保持していて、それを新しいインスタンスと間違えると誰かが知っていますか？

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)} ...