时间戳

首页 > 解决方案 > isMulti={true}时如何设置react-select组件状态？

typescript - isMulti={true}时如何设置react-select组件状态？

问题描述

这是我的代码的一部分：

我使用的表：

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

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

标签： typescriptonchangesetstatereact-select

解决方案

onChange={() => this.handleChange.bind(this)}每次更改 Select 中的值时，您分配给的回调 实际上并没有做任何事情。它唯一要做的就是绑定this到handleChange。它不会调用该函数。

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

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

想想这个

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

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

如果我们现在调用 sumWithNoArgs() 我们将得到一个新函数而不是 sum。这正是 select 所做的，它调用您传递的函数。

你所要做的

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

所以我们调用 SumWithNoArgs() 我们得到了正确的结果。

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

推荐阅读