如何在映射的选择菜单项中显示选定的值答案

【问题标题】：How to show selected value in a mapped Select menu-item如何在映射的选择菜单项中显示选定的值
【发布时间】：2019-01-22 09:59:43
【问题描述】：

我有一个问题现在几天都无法解决，所以我决定向社区寻求答案。选择的数据来自 API。

constructor(props) {
  super(props);
  this.state = {
    selectedAnswer: '',
    selectedAnswers: [],
    selectedSymptom: '',
  }
}

handleAnswerSelect = (event) => {
  this.setState((prevState) => {
    return {
      [event.target.name]: [event.target.value],
      selectedAnswers: [...prevState.selectedAnswers,
        this.state.selectedAnswer],
    }
  })
}


symptomQuestionsAnswers.Questions.map((question, index) => (
  <React.Fragment key={question.Id}>
    <InputLabel className={classes.selectLabel}>
      <p style={{ marginTop: '15px', marginBottom: 0 }}>
        {question.Question}</p>
    </InputLabel>

    <FormControl
      key={question.Id}
      fullWidth
      className={classes.selectFormControl}>
      <Select
        MenuProps={{ className: classes.selectMenu }}
        classes={{ select: classes.select }}
        value={this.state.selectedAnswer}
        id={question.id}
        inputProps={{
          name: "selectedAnswer",
        }}
        onChange={this.handleAnswerSelect}>
        {question.Answers.map(answer => (
          <MenuItem
            key={answer.Id}
            classes={{
              root: classes.selectMenuItem,
              selected: classes.selectMenuItemSelected,
            }}
            value={answer.Id}>
            {answer.Answer}
          </MenuItem>
        ))}
        }
      </Select>
    </FormControl>
  </React.Fragment>
))

我想在每个选择中显示所选项目。此时选择第二个选择的菜单项会从选择中删除第一个。我希望它是可以理解的。

【问题讨论】：

你可能需要多选吗？

标签： reactjs material-ui

【解决方案1】：

我认为您正在尝试使用 Material UI 进行多项选择。

在这种情况下，您需要将multiple 属性添加到Select 组件。

例如：

<Select
  MenuProps={{ className: classes.selectMenu }}
  classes={{ select: classes.select }}
  value={this.state.selectedAnswer}
  id={question.id}
  inputProps={{ name: "selectedAnswer" }}
  onChange={this.handleAnswerSelect}
  // here it is
  multiple
>
  {question.Answers.map(answer => (
    <MenuItem
      key={answer.Id}
      classes={{
        root: classes.selectMenuItem,
        selected: classes.selectMenuItemSelected
      }}
      value={answer.Id}
    >
      {answer.Answer}
    </MenuItem>
  ))}
  }
</Select>

在docs 中查看更多信息。

【讨论】：