Reactjs 如何在选择中使单元素视图看起来像多元素视图？

如何像在选择中的多反应中那样去除单个元素？

---

单元素视图应该看起来像多元素视图。在删除按钮的意义上

在“反应选择”中，您有可用于设置样式的样式道具

<Select
  isClearable
  defaultValue={options[0]}
  options={options}
  styles={customStyles}
/>

要清除为多选，可以使用isClearable道具

更新

另一种方法是，将“多重选择”限制为仅选择1。为此，您需要在状态中保留选项的副本，并从状态中传递选项，使用onChange可以限制

<Select
  isMulti
  options={this.state.option}
  onChange={values => this.handleSelectChange(values)}
/>

---

不清楚您想要实现什么，最好提供更多细节。单元素视图应该看起来像多元素视图。从“删除”按钮的意义上讲，是否可以单击X来删除项目？我建议您使用默认的删除选项，也就是为什么我对该部分进行了评论。进行X onclick delete将为single react-select创建一个反模式。或者一个可以放入多个选项1的最大数量？我使用了第二个解决方案multi-select限制为1个选项，并在react-select的onChange事件上以这种方式将闪烁光标隐藏在单个选定项旁边组件：document.getElementByIdmyBlock.getElementsByTagName“输入”[0]。style.display=none；就像正确的链接是

<Select
  isMulti
  options={this.state.option}
  onChange={values => this.handleSelectChange(values)}
/>

handleSelectChange = (value) =>{
    if(value!==null){
      if(value.length === 1){
        this.setState({option: value})
      }else{
        this.setState({option: options}) //here options is original options
      }
    }else{
      this.setState({option: options})
    }
}

import React, { useState } from "react";

import Select from "react-select";
import { colourOptions } from "./docs/data";

export default () => {
  const [x, setX] = useState({
    value: "ocean",
    label: "Ocean",
    color: "#00B8D9",
    isFixed: true
  });
  return (
    <Select
      value={x ? [x] : []}
      isMulti
      name="colors"
      options={colourOptions}
      className="basic-multi-select"
      classNamePrefix="select"
      onChange={values => setX(values ? values[values.length - 1] : undefined)}
    />
  );
};