当isMulti = {true}时如何设置反应选择组件状态？

Question

这是我的代码的一部分：

我使用的表：

const options = [
  { value: 'Orange', label: 'Orange' },
  { value: 'Banana', label: 'Banana' },
  { value: 'Apple', label: 'Apple' },
];

我创建状态“值”，它是一个初始状态为空表的表：值：[]。

 private handleChange(value: any) {
    this.setState({ value: value });
  }

<Select
          value={this.props.selection}
          onChange={() => this.handleChange.bind(this)}
          options={options}
          isClearable={true}
          isMulti={true}
        />

{this.props.selection}是以下类别的一种：

export class Selection {
  value: string;
  label: string;

  constructor(
    value: string,
    label: string,
  ) {
    this.value = value;
    this.label = label;
  }
}

当我从“选择”组件中选择选项时，“值”状态不变。你知道我在做什么错吗？

Answer 1

您要分配给的回调每次您在“选择”中更改值时，onChange={() => this.handleChange.bind(this)}实际上都不执行任何操作。它唯一要做的就是将this绑定到handleChangeFunction。它不会调用该函数。

[onChange={this.handleChange.bind(this)}，您可能想要这样做，以便为每个更改调用绑定后的句柄函数。

考虑这个

function sum(a,b){
   return a+b;
}

const sumWithNoArgs = () => sum.bind(null, 1,2);

如果现在调用sumWithNoArgs（），我们将获得一个新函数而不是sum。我们必须做

const sumWithNoArgs = () => sum.bind(null, 1,2)();

所以我们将其称为SumWithNoArgs（），我们得到了正确的结果。

您需要在构造函数中进行函数的绑定，或者将函数声明为类变量，以便将其自动绑定到您的类。