在 React-Select 中用自定义文本替换 clearIndicator X

Question

我需要在 MultiSelect 的 select 组件中删除 clearIndicator 的默认 X，并将其替换为自定义文本。有没有一种方法可以做到这一点而不会失去删除 selected 选项的能力（就像 isClearable={false} 一样）？

代码：

export const MultiSelect = () => {
  const [selected, setSelected] = useState([]);

  const options = [
    { value: '1', label: 'Label1' },
    { value: '2', label: 'Label2' },
    { value: '3', label: 'Label3' },
  ];

const customStyles = {
    control: (prevStyle, { isFocused }) => ({
      ...prevStyle,
      backgroundColor: 'rgba(248, 251, 251, 1)',
      boxShadow: 'none',
      borderColor: isFocused ? 'black' : 'grey',
      ':hover': {
        borderColor: isFocused ? 'black' : 'grey',
      },
    }),
    clearIndicator: (prevStyle) => ({
      ...prevStyle,
      color: 'rgba(0, 0, 0, 0.4)',
      ':hover': {
        color: 'rgba(0, 0, 0, 0.4)',
      },
    }),
  };

return (
    <ReactSelect
      ref={reactSelectRef}
      placeholder={placeholder}
      instanceId={`multiselect-${id}`}
      styles={customStyles}
      isOptionSelected={isMulti && isOptionSelected}
      options={getOptions()}
      value={getValue()}
      onChange={isMulti ? onChangeHandler : onChange}
      hideSelectedOptions={false}
      closeMenuOnSelect={!isMulti}
      formatGroupLabel={formatGroupLabel}
      isMulti={isMulti}
    />
  );

Answer 1

React Select 可以选择传入您自己的自定义组件 Docs

看起来像这样

 <Select
    //You can pass in any component as the ClearIndidcator and do whatever customizations you want
    components={{ ClearIndicator: () => <div>Clear</div> }}
    {...props}
 />

在 React-Select 中用自定义文本替换 clearIndicator X

Replacing the clearIndicator X with custom text in React-Select

reactjs

react-select