reactjs - react |多个动态选择框的单个onchange方法

Question

我从 API 收到如下响应 json。通过使用该响应，我生成动态选择。

问题:无法为不同的选择框选择不同的值。我正在努力通过状态来实现。在这种情况下如何动态声明状态。

JSON

const jsonFields = {
  fields: [
    { name: "sex", value: ["m", "f"] },
    { name: "age", value: ["10", "20"] }
  ]
};

注意:我不知道 json 键名，例如性别和年龄。名称将是动态的

选择更改:

handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };

加载字段:

loadfields = () => {
    const FieldsArray = [];
    let FieldsData = jsonFields.fields;
    FieldsData.forEach((val, index) => {
      let FieldsDatavalue = val.value;
      FieldsArray.push(
        <FormControl>
          <InputLabel htmlFor="controlled-open-select">{val.name}</InputLabel>
          <Select
            value=""
            onChange={this.handleChange}
            inputProps={{
              name: "age"
            }}
          >
            {FieldsDatavalue.map(option => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      );
    });
    return FieldsArray;
  };

场景:Code Sandbox

Answer 1

您没有将所选值存储在您所在的州，并且 inputProps 中的 name 被硬编码为 'age'。如果你解决了这些问题，它就会起作用:

      <Select
        value={this.state[val.name] ? this.state[val.name] : ''}
        onChange={this.handleChange}
        inputProps={{name: val.name}}
      >

这是一个CodeSandbox link .

更新:未定义的值会导致标签与所选值重叠，并且由于您动态检索它们并且无法在状态中初始化它们，因此您可以使用条件 this.state[val.name] ？ this.state[val.name] : '' 修复标签。 (沙盒已更新)