Множественный выбор не работает, дает только последнее нажатие - PullRequest
Новая
       19

Множественный выбор не работает, дает только последнее нажатие

0 голосов
/ 05 ноября 2019

Я реализовал раскрывающийся список множественного выбора из документации по реакционной-загрузке .

Это не позволяет мне сделать множественный выбор и получает только последний нажатый параметр. У меня есть переменная состояния для массива. Что еще мне не хватает? Приложение создается с помощью create-реагировать-приложение .

У меня установлено состояние для массива внутри конструктора класса. Привязка обработчика событий также выполняется в конструкторе.

Далее я показываю мой обработчик событий, за которым следует группа форм с onChange и значением, установленным в состояние. (обратите внимание, что у меня есть выпадающий список, который работает нормально.)

Затем я передаю это значение нескольким классам, прежде чем оно будет проанализировано в JSON. Последние пасты - это те классы. Я удалил другие параметры, чтобы их было легче читать, любые идеи, не стесняйтесь спрашивать дополнительную информацию. 

this.state = {

 codeCoverage: [],

}

 this.handleCodeCoverageChange = this.handleCodeCoverageChange.bind(this);

//Event handlers below
    handleCodeCoverageChange(event){
        this.setState({
            codeCoverage: event.target.value
        })
    }

<Form.Group>
<Form.Label>Please choose your desired code coverage software(s)</Form.Label>
<Form.Control as="select" value={this.state.codeCoverage} onChange={this.handleCodeCoverageChange} multiple>
<option value="">--Please choose an option--</option>
<option value="cobertura">Cobertura</option>
<option value="sonarcube">Sonarcube</option>
</Form.Control>
</Form.Group>

var configurator = new Configurator(this.state.codeCoverage)

class Configurator
{
    constructor(
        code_coverage)
    {
        this.pipeline = new Pipeline(code_coverage)
    }

}

class Pipeline
{
    constructor(code_coverage)
    {
        this.analysisAndSecurity = new AnalysisAndSecurity(code_coverage)
    }

class AnalysisAndSecurity{
 parameter
    constructor(code_coverage)
    {
        this.code_coverage = code_coverage

    }
}

1 Ответ

2 голосов
/ 05 ноября 2019

В вашей функции handleChange вы присваиваете state.codeCoverage значение выбранного элемента вместо adding его массиву выбранного элемента. Вот почему, когда вы выбираете другой элемент, он удаляет старое значение. Я бы порекомендовал войти e.target.value и this.state.codeCoverage, чтобы лучше понять. Что касается решения:

Поскольку вы используете multiple select, он ожидает массив как значение вместо одного значения. Поэтому вам нужно изменить две вещи в вашем handleChange методе.

  1. Сначала вам нужно add ваш элемент к существующим значениям, а не заменять их.
  2. Вы должны обрабатывать, когда выбранный элемент нажимается снова и должен быть невыбранным.

Вы можете выполнять обе эти задачи, как показано ниже: 

handleChange = e => {
  const { codeCoverage } = this.state;

  // Find the value selected the codeCoverage array
  const index = codeCoverage.indexOf(e.target.value);

  // If the value is not found then add it to the array
  if (index === -1) codeCoverage.push(e.target.value);
  // If value found then remove the value to unselect
  else codeCoverage.splice(index, 1);

  // Set the state so that the component reloads with the new value
  this.setState({ codeCoverage: [...codeCoverage] });
};
...