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绑定到handleChange。它不会调用该函数。

传递已经是函数的绑定结果就足够了。

onChange={this.handleChange.bind(this)}

考虑一下

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

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

如果现在调用sumWithNoArgs（），我们将获得一个新函数，而不是求和。这正是select所做的，它调用了您要传递的函数。

您必须

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

因此我们将其称为SumWithNoArgs（），以获得适当的结果。

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

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

1 个答案: