使用 MultiValueContainer 删除反应选择中的项目

Question

我使用react-select来实现多值下拉菜单，但使用我们的内部UI组件库来渲染输入框中选定的值。我正在用我们的组件覆盖 MultiValueContiner。它渲染得很好，我可以选择项目并将它们添加并呈现在输入框中。问题在于删除项目。我可以从组件的 onClick 处理程序访问什么以将其从当前选定的选项中删除？我是否只需将 currentValue 和 setCurrentValue 状态访问器添加到每个菜单选项项并通过例如访问props.data.setCurrentValue()?

自定义多值容器

import { useState } from 'react';
import Select, { InputActionMeta, components, MultiValueGenericProps, MultiValue, ActionMeta } from 'react-select';

// import component from internal UI lib, dummy import here
import MyUIObject from './MyUIObject';

interface MenuOption {
  value: string;
  label: string;
}

export interface Props {
  title: string;
  items: MenuOption[];
}
const MyUIObjectValueContainer = (props: MultiValueGenericProps<MenuOption>) => {
  
    return (
    <components.MultiValueContainer {...props}>
      <MyUIObject
        text={props.data.label}
        onClick={ (e) => {
            e.stopPropagation();
            e.preventDefault();
            // HOW TO REMOVE FROM SELECTED OPTIONS ???
        }}
      />
    </components.MultiValueContainer>
  );
};

function MyCustomMultiSelect(props: Props) {
  
  const [inputValue, setInputValue] = useState('');
  const [currentValue, setCurrentValue] = useState<MenuOption[]>([]);

  function handleInputChange(newValue: string, actionMeta: InputActionMeta) {
    if (actionMeta.action === 'input-change') {
      setInputValue(newValue);
    }
  }

  // clear manually typed search string from input
  function handleOnBlur() {
    setInputValue('');
  }

  function handleOnChange(newValue: MultiValue<MenuOption>, actionMeta: ActionMeta<MenuOption>) {
    setCurrentValue( newValue as MenuOption[] );
  }

  return (
    <Select
      isMulti
      isClearable
      isSearchable
      options={props.items}
      closeMenuOnSelect={false}
      onInputChange={handleInputChange}
      inputValue={inputValue}
      onBlur={handleOnBlur}
      components={{ MultiValueContainer: MyUiObjectValueContainer }}
      value={currentValue}
      onChange={handleOnChange}
    />
  );
}

export default MyCustomMultiSelect;

Answer 1

您还没有共享自定义选项组件的代码，所以我假设您正确构建了它，并确保

react-select

的 props 被传播到自定义组件中 react-select 文档。

在多选的情况下，您管理的状态应该是包含

label

和

id

属性的选定选项数组。当您单击选定的选项将其删除时，

react-select

返回选定值的新数组，其中您单击的选项已被过滤掉。您应该能够获取返回的数组并设置我在这个简化代码中演示的所选选项状态：

import { useState } from "react";
import Select from "react-select";

export const options = [
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
  { label: "Option 3", value: 3 },
  { label: "Option 4", value: 4 },
  { label: "Option 5", value: 5 }
];

const App = () => {
  const [value, setValue] = useState([]);

  const handleChange = (e) => setValue(e);

  return (
    <Select
      value={value}
      options={options}
      isMulti
      onChange={handleChange}
      closeMenuOnSelect={false}
    />
  );
};

export default App;

您也可以看看这个沙盒，看看它是否有效

Answer 2

调用 props.removeProps.onClick() 删除所选选项。和 props.clearValue() 删除所有。

const CustomMultiValue = (props) => (<components.MultiValueContainer {...props}>
<Chip
  avatar={<UserAvatar size="xs" user={props.data} />}
  label={`@${props.data.username}`}
  onDelete={props.removeProps.onClick}
/></components.MultiValueContainer>);