Javascript 如何在react中处理多个react select块

我正在编写一个包含两个react select字段的react组件，只要这两个字段都有一个值，我就需要将组合对象作为回调传递给父对象。我知道的一种方法是将这两个选项存储在一个状态的onchange中，并将它们组合起来发送。然而，由于需要性能指标，我正在尝试使用状态更改最小化重新渲染

这是我现在的伪代码。这两种方法中的onchange方法都设置了一个状态，但我不希望发生重新渲染

fieldSelectorChange = option => {
    this.setState(
      {
        option,
      },
    );
  };


<Select
      options={ fields }
      value={ sortedField }
      searchable
      placeholder={ trans( 'Find an option' ) }
      onChange={ this.fieldSelectorChange }
      autoFocus
    />
    <Select
      options={ sortOptions }
      value={ sortedOrder }
      defaultValue={ sortOptions[ 0 ] }
      placeholder={ trans( 'Choose' ) }
      onChange={ this.fieldSelectorChange }
    />

无按钮 如果要避免这种情况，您必须再创建两个函数，并在组件内部使用它们

onSelect1Change=e=>this.onSelectChange'select1value'，e.target.value onSelect2Change=e=>this.onSelectChange'select2value'，e.target.value 您还可以根据需要在此处添加一些验证：

此.state中的if字段{ this.setState{[field]：value}； }否则{ //字段丢失，请处理此案例 } 形式与意义 在表单组件中包装输入字段是一种常见做法

onSelect1Change(e) {
  this.setState({ select1value: e.target.value });
}

onSelect2Change(e) {
  this.setState({ select2value: e.target.value });
}

onSumbit(e) {
  e.preventDefault();
  /* get both values from state and do something */
  console.log(this.state.select1value, this.state.select2value);
}
/* ... */
<form onSubmit={onSubmit}>
  <Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
  <Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
  <input type="submit" value="Submit" />
</form>

按钮 但是你也可以不用形式来做。 您只需创建一个按钮，并在用户单击时从状态获取值

onSelect1Change(e) {
  this.setState({ select1value: e.target.value });
}

onSelect2Change(e) {
  this.setState({ select2value: e.target.value });
}

onClick(e) {
  e.preventDefault();
  /* get both values from state and do something */
  console.log(this.state.select1value, this.state.select2value);
}
/* ... */
<div>
  <Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
  <Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
  <button onClick={onClick}>Click me!</button>
</div>

---

先得到真正的代码，然后我们再谈。这还不够具体。更新的@MikeTungthers本身没有提交按钮。只要有值，数据就必须进行排序。因此，如果我们选择其中一个下拉列表，并且在另一个选择中有一些先前选择的值，那么它也应该在调用中返回数据back@leo可以然后，您可以尝试使用第一个假定的解决方案。我本来会使用表单，但由于没有提交，我认为我无法做到这一点。@leo我的第一个解决方案使用这个.props.parentCallback属性。如果两个select值都有parentCallback调用：此解决方案不需要表单和按钮。注意：由于我们没有集中的函数来检查所有内容，我们必须检查每个onSelectChange函数内部的条件。因此没有解决方法，只能使用两个setState？

onSelect1Change(e) {
  this.setState({ select1value: e.target.value });
}

onSelect2Change(e) {
  this.setState({ select2value: e.target.value });
}

onSumbit(e) {
  e.preventDefault();
  /* get both values from state and do something */
  console.log(this.state.select1value, this.state.select2value);
}
/* ... */
<form onSubmit={onSubmit}>
  <Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
  <Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
  <input type="submit" value="Submit" />
</form>

onSelect1Change(e) {
  this.setState({ select1value: e.target.value });
}

onSelect2Change(e) {
  this.setState({ select2value: e.target.value });
}

onClick(e) {
  e.preventDefault();
  /* get both values from state and do something */
  console.log(this.state.select1value, this.state.select2value);
}
/* ... */
<div>
  <Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
  <Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
  <button onClick={onClick}>Click me!</button>
</div>