Question

给定一个数组 const places = [" a1", "a2", "a3"]; 和

  <FormControl variant="outlined" className={classes.formControl}>
    <InputLabel id="dropdown_label">Testing</InputLabel>
    <Select
      value={5}
      onChange={handleChange}
      label="Testing"
    >
      <MenuItem value={10}> {places[0]} </MenuItem>
      <MenuItem value={20}>{places[1]}</MenuItem>
      <MenuItem value={30}>{places[2]}</MenuItem>
    </Select>
  </FormControl>

当地方大小不一时，我如何才能为每个地方的每个值创建 menuItem？

Answer 1

您必须对 map 数组进行 places 并返回 MenuItem 组件。请参阅下面的示例。我已经修改了您的代码以使其正常工作。不要忘记将 key 属性添加到从 map 返回的组件中。

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel id="dropdown_label">Testing</InputLabel>
  <Select
    value={5}
    onChange={handleChange}
    label="Testing"
  >
  {places.map((place, i) => (
    <MenuItem key={i} value={(i + 1) * 10}>{place}</MenuItem>
  )}
  </Select>
</FormControl>

反应将数组元素添加到下拉列表？

1 个答案: