如何使单个元素视图在 react-select 中看起来像多个？

Question

在react-select中如何像在multi中那样去除单个元素？单一元素视图应该看起来像多元素。在某种意义上与删除按钮

<Select

    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

https://codesandbox.io/s/vozjb?module=/example.js

Answer 1

在 react-select 中你有 styles 道具可用于造型，

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

而 styles 是，

const customStyles = {
  singleValue: styles => ({ ...styles, 
  color: '#f3f4f5',
  backgroundColor: '#000',
  padding: 5,
  marginRight: 10,
  borderRadius: 4,
  // ...cross()   //This will give you feel of multi select but clicking on this will not work
  }),
  clearIndicator: (base, state) => ({
  ...base,
  cursor: 'pointer',
})
}

要清算为multi-select，您可以使用isClearable prop.

Demo

更新

另一种方法是，将 multi-select 限制为 select 只有 1。为此，您需要在 state 中保留选项的副本并从状态传递选项，并使用 onChange 您可以限制，

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

而handleSelectChange函数应该是，

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

Answer 2

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

https://codesandbox.io/s/react-select-single-as-milti-snwm1

如何使单个元素视图在 react-select 中看起来像多个？

How to do the single element view should look like multi in react-select?

reactjs

react-select