Question

使用React-Select library为onChange事件创建选择器。因此，每当我选择一个地区时，城市列表都应更新，但是，当我更改“区域...”时，第一个选定的城市仍处于选中状态

更改状态后，城市列表将更新，但是所选城市仍然处于选中状态，我想对其进行清理。定义变量值的变量会更新，但不会更改组件。

in the text is updated, nulled, and but in the form it continues

我想知道在更改区域时如何删除所选的选项。

这是the code-sandbox我正在使用

Answer 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的{{1}}道具，以便您可以实时测试here。

清除选择的值并列出

1 个答案: