<SelectList>のメニュー項目を選択<SelectList>値

Question

年齢、レースなどの複数のオプションにmaterial-uiライブラリのコンポーネントを使用していますが、問題のあるメニュー項目を選択すると、他のコンポーネントの値が変更されます。

 <SelectField 
     floatingLabelText="City" 
     value={this.state.value} 
     onChange={this.handleChange} 
     fullWidth 
     > 
     <MenuItem value={22} primaryText="New York" /> 
     <MenuItem value={23} primaryText="London" /> 
     <MenuItem value={24} primaryText="Paris" /> 
     <MenuItem value={25} primaryText="Rome" /> 

    </SelectList> 
     <SelectField 
     floatingLabelText="Smoker" 
     value={this.state.value} 
     onChange={this.handleChange} 
     fullWidth 
     > 
     <MenuItem value={19} primaryText="No" /> 
     <MenuItem value={20} primaryText="Ex Smoker - Approximate date of 
     quitting" /> 
     <MenuItem value={21} primaryText="Yes - Approximate consumption per 
     day" /> 

     </SelectField> 

Answer 1

理由は、あなたは、両方のSelectFieldsの値を保存するために、単一のstate変数を使用しているので、フィールドのいずれかが変更された場合、それはまた、他のフィールドを変更します、です。 1つの変数の代わりに、すべてのSelectFieldに個別の変数を使用します。

は、これら二つのSelectFieldsため別の変数を定義します。

constructor(){ 
    super(); 
    this.state = {city: null, smoker: null} 
} 

は今SelectFieldの代わりに同じで、これらの変数を使用します。

<SelectField 
    floatingLabelText="City" 
    value={this.state.city}     //here 
    onChange={this.handleChange} 
    fullWidth={true} 
> 
    <MenuItem value={22} primaryText="New York" /> 
    <MenuItem value={23} primaryText="London" /> 
    <MenuItem value={24} primaryText="Paris" /> 
    <MenuItem value={25} primaryText="Rome" /> 

</SelectList> 
<SelectField 
    floatingLabelText="Smoker" 
    value={this.state.smoker}    //here 
    onChange={this.handleChange} 
    fullWidth={true} 
> 
    <MenuItem value={19} primaryText="No" /> 
    <MenuItem value={20} primaryText="Ex Smoker - Approximate date of quitting" /> 
    <MenuItem value={21} primaryText="Yes - Approximate consumption per day" /> 
</SelectField>