时间戳

首页 > 解决方案 > react-select 在状态变化时不重置值

javascript - react-select 在状态变化时不重置值

问题描述

在重置表单内的所有状态时，我有 2 个选择国家/地区输入，我想将其重置为默认占位符。我正在使用 2 个状态变量来存储国家/地区，我有一个功能可以重置我的状态，但选择输入不会重置为默认值。它在最后选择的国家/地区保持选中状态。我将状态重置为空，但我无法让它工作。你能帮帮我吗？

class FormularioCalcular extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      moneda1: '',
      monto1: '',
      moneda1placeholder: 'Cantidad a enviar',
      moneda1disable: false,
      moneda2: '',
      monto2: '',
      moneda2placeholder: 'Cantidad a recibir',
      moneda2disable: false,
      pais1: null,
      pais2: null,
      disable: false

    };

    this.timeout = 0;

    this.moneda1Cambio = this.moneda1Cambio.bind(this);
    this.moneda2Cambio = this.moneda2Cambio.bind(this);

    this.baseState = this.state;
  }

  pais1Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais1: value,
      moneda1: value2
    });
  };

  pais2Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais2: value,
      moneda2: value2
    });
  };

  resetState = () => {
    this.setState(this.baseState);
    this.setState({
      pais1: null,
      pais2: null
    });
    ReactTooltip.hide();
  };

这是我选择的组件，如果我在上面使用 value 选项，它会崩溃，我无法更改它保留在占位符默认消息上的国家/地区。

        <Select
          name="paisorigen"
          onChange={this.pais1Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
        />

        <Select
          name="paisdestino"
          onChange={this.pais2Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais destino"
          isDisabled={this.state.disable}
        />

更新

值选项崩溃，因为它需要像这样接收和对象的值和标签。

        <Select
          name="paisorigen"
          onChange={this.pais1Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
          value={{ value: this.pais1, label: labelPais(this.pais1) }}
        />

但是现在我遇到了一个问题，因为当我单击某个选项时。它保持默认值。这是我正在使用 onChange 的功能

  pais1Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais1: value,
      moneda1: value2
    });
  };

标签： javascriptreactjsreact-select

解决方案

有几件事引起了我的注意：

  1. 当您this.baseState = this.state;在构造函数中执行此操作时，您不会复制状态，只是对其进行引用，因此稍后当您更新时，this.state您也会更新this.baseState. 要复制它：this.baseState = Object.assign({}, this.state).

  2. 您的resetState函数有 2 次调用setState. 尝试组合它们：

resetState = () => {
    this.setState({
       ...this.baseState,
       // There's no need to set pais1 and pais2 to null here since baseState already have them as null
       // pais1: null,
       // pais2: null   
    });

    // or simply...
    // this.setState(this.baseState)

    ReactTooltip.hide();
  };
  1. 试试这个，看看它是否有助于调试正在发生的事情。
       <Select
          name="paisorigen"
          onChange={(e) => {
            console.log({e}) // and check your console to see what's coming back here
            this.setState({pais1: e.value})
          }}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
          value={this.state.pais1}
        />
    ```

推荐阅读