Question

我收到来自Customer下方的API的回复。通过使用该响应，我正在生成动态json。

问题： 无法为不同的选择框选择不同的值。我正试图用国家来实现。在这种情况下如何动态声明状态。

JSON

select

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

选择更改：

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

加载字段：

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

情景：https://data.gov.sg/dataset/taxi-availability

Answer 1

您没有将所选值存储在您的州中，name中的inputProps被硬编码为'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] : ''来修复标签。（沙箱已更新）

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

1 个答案: