Question

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

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
    });
  };

Answer 1

如果您尝试在构造函数中绑定pais1Cambio和pais2Cambio，它能正常工作吗？

Answer 2

尝试将价值道具传递给您的Select组件，例如| result | | ------------------- | | Bob: 10 > 25 (150%) | | Tim: 10 > 20 (100%) |

Answer 3

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

在构造函数中执行this.baseState = this.state;时，您并没有复制状态，只是对其进行引用，因此稍后在更新this.state时，您还将更新{{1 }}。要复制它：this.baseState。
您的this.baseState = Object.assign({}, this.state)函数有2个对resetState的调用。尝试合并它们：

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();
  };

反应选择不会在状态改变时重置值

3 个答案: