如何在反应中处理多个反应选择块

Question

每当两个字段都有一个值时，我正在编写一个带有两个 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 }
    />

Answer 1

没有按钮

onSelect1Change(e) {
  this.setState({ select1value: e.target.value });
  if (this.state.select2value) {
    this.props.parentCallback({
      value1: e.target.value,
      value2: this.state.select2value
    })
  }
}

onSelect2Change(e) {
  this.setState({ select2value: e.target.value });
  if (this.state.select2value) {
    this.props.parentCallback({
      value1: this.state.select1value,
      value2: e.target.value,
    })
  }
}

/* ... */
<Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
<Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />

没有按钮，只有一个 onChange

一个onSelectChange 如您所问，但在这种情况下，您在每次渲染时都重新创建箭头函数，并且没有得到很好的优化。

onSelectChange(field, value) {
  this.setState({ [field]: value });

  if (this.state.select1value && this.state.select2value) {
    this.props.parentCallback({
      value1: value,
      value2: this.state.select2value
    })
  }
}

/* ... */
<Select
  value={this.state.select1value}
  onChange={e => this.onSelectChange('select1value', e.target.value)}
  /* ... */
/>
<Select
  value={this.state.select1value}
  onChange={e => this.onSelectChange('select2value', e.target.value)}
  /* ... */
/>

如果你想避免这种情况，你必须再创建两个函数并在你的组件中使用它们

onSelect1Change = e => this.onSelectChange('select1value', e.target.value)
onSelect2Change = e => this.onSelectChange('select2value', e.target.value)

您也可以在这里添加一些验证：

if (field in this.state) {
  this.setState({ [field]: value });
} else {
  // field is missing, do something with this case
}

表格和汇总

将输入字段包装在表单组件中是一种常见的做法。

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>