Как показать выбранное значение в отображенном пункте меню «Выбрать» - PullRequest
Новая
       5

Как показать выбранное значение в отображенном пункте меню «Выбрать»

0 голосов
/ 22 января 2019

У меня есть проблема, которую я не могу решить в течение нескольких дней, поэтому я решил попросить сообщество получить ответ. Данные для выбора поступают из 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>
))

Я бы хотел показывать выбранный элемент при каждом выборе. В данный момент выбор пункта меню второго выбора удаляет первый из выбора. Надеюсь, это понятно.

1 Ответ

0 голосов
/ 22 января 2019

Я думаю, что вы пытаетесь сделать множественный выбор, используя 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>

Подробнее в документах .

Надеюсь, это помогло.

...