Question

如何使用带有分组选项的react-select组件的javascript设置值？如this post中一样对选项进行了分组。

编辑以回复@Tholle的评论

我没有提到我正在使用Typescript，因为我认为问题往往会得到较少的答案。

这是我使用组件的方式：

<Select
    value={this.state.Industry}
    options={this.industryOptions}
    onChange={ (e) => this.handleChange("industry", e)}
></Select>

industryOptions属于以下类型：

industryOptions: Array<{label: string, options: Array<{label: string, value: string}>}>

例如：

label: "Automotive"
options: Array(3)
    0: {label: "Car brand", value: "77"}
    1: {label: "Car dealer", value: "76"}
    2: {label: "Other", value: "75"}

在下拉列表中选择一个选项时，this.state.Industry会发生变化，但是当this.state.Industry发生更改时，Select组件不会发生任何变化。

Answer 1

我正在回答自己的问题，以供将来参考。我意识到“值”应该与选项具有相同的类型。即{label：string，value：string}类型的对象，而不是字符串。因此，我想出了我需要搜索具有相同值的选项的方法。这是在我的组件（“选择”的父级）的渲染功能中：

let indystryValue: {value: string, label: string}
let prospect: {value: string, label: string} | undefined;
this.industryOptions.forEach((io) => {
    prospect = io.options.find((o) => o.value == this.state!.measurementBasics!.Industry.toString());
    if(prospect !== undefined){
        indystryValue = prospect;
    }
});

...然后将其放在“选择”中：

<Select value={indystryValue!} ...

尽管我遇到了此编译错误，但它仍在工作： [ts] 输入'{value：string;标签：字符串； }”不可分配给“ ValueType <{标签：字符串；选项：{标签：字符串；值：字符串； } []; }>'。输入'{value：string;标签：字符串； }'不能分配给类型'{label：string;选项：{标签：字符串；值：字符串； } []; } []'。类型'{value：string;类型中缺少属性'length'。标签：字符串； }'。 [2322] Select.d.ts（202，3）：期望的类型来自属性'value'，该属性在此处声明为'IntrinsicAttributes＆IntrinsicClassAttributes>和Readonly <{children ?: ReactNode; }>和只读>' （JSX属性）值？：ValueType <{标签：字符串；选项：{标签：字符串；值：字符串； } []; }>

如何使用分组选项设置react-select的值？

1 个答案: