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

问题描述

我需要在MultiSelect的选择组件中删除clearIndicator的默认X并将其替换为自定义文本。有没有办法做到这一点而又不失去删除所选选项的能力（就像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,1)',boxShadow: 'none',borderColor: isFocused ? 'black' : 'grey',':hover': {
        borderColor: isFocused ? 'black' : 'grey',},}),clearIndicator: (prevStyle) => ({
      ...prevStyle,color: 'rgba(0,0.4)',':hover': {
        color: 'rgba(0,};

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-select reactjs reactjs