Question

我有几天无法解决的问题，因此我决定要求社区提供答案。选择的数据来自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>
))

我想在每个选择中显示选择的项目。此刻，选择第二个选择的菜单项将从选择中删除第一个。我希望这是可以理解的。

Answer 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中查看更多信息。

希望有帮助。

如何在映射的“选择”菜单项中显示所选值

1 个答案: