Очистить выбранное значение и список - PullRequest
Новая
       1

Очистить выбранное значение и список

1 голос
/ 20 мая 2019

Использование библиотеки React-Select для создания селектора для события onChange.Поэтому всякий раз, когда я выбираю Регион , список Города должен обновляться, однако первый выбранный город остается выбранным, когда я меняю Регион ...

После изменения состояниясписок городов обновляется, однако выбранный город остается выбранным, я бы хотел его убрать.переменная, которая определяет значение переменной, обновляется, но не изменяет компонент.

в тексте обновляется, обнуляется, но в форме продолжается

Я хочу знать, как удалить выбранный параметр при изменении региона.

Это песочница с кодом Я использую

1 Ответ

1 голос
/ 20 мая 2019

Для достижения своей цели вам необходимо обновить код в двух местах:

  1. В fetchCidades Функция:

Вам необходимо добавить cidadeOrigem: null ввсе setState вот так: 

async fetchCidadesO() {

    if (this.state.estadoOrigem) {
      let body = {};
      body.estado = this.state.estadoOrigem.value;
      let URL = "https://fretesbrasil.herokuapp.com/api/cidadeo";
      if (stringify(body) !== "") URL += `?${stringify(body)}`;
      //console.log(URL);

      const data = await fetch(URL)
        .then(response => response.json())
        .catch(error => this.setState({ error }));

      this.setState({
        // ({value: '', label: 'Todos'}
        cidadeOrigem: false,
        cidadesO: data.data.map(cidade => ({
          value: cidade,
          label: cidade
        }))
      });
    } else
      this.setState({
        // ({value: '', label: 'Todos'}
        cidadeOrigem: false,
        cidadesO: []
      });
  }
В самом Select:

Использование value={cidadeOrigem} вместо value={this.cidadeOrigem}

<Select
   className="basic-single"
   placeholder="Cidade de Origem"
   onChange={this.toggleCidadeO} //{value => this.setState({ value })}
   //defaultValue={cidadesO[0]}
   value={cidadeOrigem}
   name="cidadeOrigem"
   //isDisabled={this.cidadeODisable} don't work
   isSearchable={true}
   options={cidadesO}
/>

Я очистил ваш код здесь и включил disabled реквизитычто вы прокомментировали как not working, так что вы можете проверить вживую здесь .

...