时间戳

首页 > 解决方案 > 以编程方式更改 react-select 组件的值

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

问题描述

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

我的组件包装器定义为：

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处理程序第二次使用 null 参数调用，但选择组件本身不会重新呈现，它会显示用户的选择。关于下一步我应该尝试什么的任何想法？

标签： javascriptreactjsreact-select

解决方案

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

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

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

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

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

推荐阅读