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