Question

我正在使用material-ui库中的组件来查看年龄，种族等多种选项。但问题是，在a中选择一个菜单项会更改其他组件中的值。

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

在<selectlist>中选择一个菜单项，更改其<selectlist>值

1 个答案: