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

我在React应用程序中大量使用该组件。我已经创建了一个包装器组件，它允许我指定一个用例，在这个用例中，我希望选择的值在选择时重置

我的组件包装器定义为：

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

import React，{useRef}来自“React”；
从“反应选择”导入选择
导出常量SelectComponent=（道具）=>{
const selectRef=useRef（空）；
const valueSelected=（项目）=>{
如果（！item | | item.value==props.selectedValue）{
返回；
}
如果（道具重置选择）{
selectRef.current.select.clearValue（）；
}
道具。onValueSelected（项目）；
}
返回
;
}

这就是引用组件的方式：

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

const选项=[
{标签：'Item1'，值：'1'}，
{标签：'Item2'，值：'2'}，
{标签：'Item2'，值：'2'}，
];

---

它似乎正在工作，因为my

valueSelected

处理程序第二次被调用时带有空参数，但选择组件本身不会重新呈现，它会让用户的选择显示出来。有没有关于下一步应该尝试什么的想法？

只需将

null

传递给值（或空字符串）：

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

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

  null

---

请注意，您已将

value

设置为

props。selectedValue

未定义，如果

value

未定义（或根本未给出），则使用非受控组件行为。

是否可以显示包装组件的代码？在

SelectComponent

中，您将“”作为值传递，所以它永远不会被更新。您需要将

value

定义为一种状态，并在需要更改时将其设置为任意值。@ataravati这是我面临的问题，我不想更新组件，我想在onChange事件处理程序中捕获所选项目，并将选择列表保留为空，但它的行为不像一个真正的受控组件。该值保留在用户选择的任何位置，因此我尝试在onChange事件处理程序中手动清除该值。

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