在<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

原因是，您使用的是單變量state挽救兩個SelectFields的價值，因此，如果任何領域都會發生變化，它將改變等領域也。所有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>