反应 | 多个动态选择框的单个onchange方法

Question

我收到来自 API 的响应，如下所示json。通过使用该响应，我正在生成动态select.

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

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

场景：代码沙箱

Answer 1

您没有将所选值存储在您的状态中，并且nameininputProps被硬编码为'age'. 如果你解决了这些问题，它就会起作用：

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

这是CodeSandbox 链接。

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