以编程方式更改 react-select 组件的值

Question

我在 React 应用程序中大量使用 react-select 组件。我创建了一个包装器组件，它允许我指定一个用例，我希望 selected 值在 selection 上重置。

我的组件包装器定义为：

import React, { useRef } from 'react';
import Select from 'react-select'
export const SelectComponent = (props) => {
    const selectRef = useRef(null);

    const valueSelected = (item) => {
        if (!item || item.value === props.selectedValue) {
            return;
        }

        if (props.resetOnSelect) {
            selectRef.current.select.clearValue();
        }
        props.onValueSelected(item);
    }

    return <div className="modal-form-row">
        <Select ref={selectRef} options={props.options} onChange={valueSelected} id={props.id} isClearable={true} isSearchable={true} placeholder={props.label} value={props.selectedValue} />
    </div>;
}

这就是引用组件的方式：

const options = [
    { label: 'Item1', value: '1' },
    { label: 'Item2', value: '2' },
    { label: 'Item2', value: '2' },
];
<SelectComponent id="select-list" label="Pick an Item" options={options} onValueSelected={this.handleNewItem} value="" resetOnSelect={true} />

它似乎在工作，因为我的 valueSelected 处理程序第二次被调用，参数为空，但 select 组件本身不会重新呈现，它让用户的 select离子显示。关于我接下来应该尝试什么有什么想法吗？

Answer 1

只需将 null 传递给值（或空字符串）：

<Select ... value={ null } />

它的行为与任何其他受控组件一样：

使用新值调用 onChange 处理程序
值已设置，在本例中为 null

请注意，您已将 value 设置为 props.selectedValue，这是未定义的，如果 value 未定义（或根本未给出），不受控制的组件行为是使用过。

以编程方式更改 react-select 组件的值

Programmatically change the value of react-select component

javascript

reactjs

react-select