React-select 默认行为和自定义外观答案

【问题标题】：React-select default behaviour and custom lookingReact-select 默认行为和自定义外观
【发布时间】：2020-04-23 02:08:00
【问题描述】：

我对 react 和 react-select 也很陌生。在尝试实现自定义外观组件时，我阅读了很多信息，但恕我直言，它对用户不太友好。

我希望我的 react-select 组件连续显示选定的数据。现在它以列显示它们，我附上了图片。

顺便说一句，名称，标签字段的用途是什么？确切的区别是什么？

<Select
  defaultValue={[models[0], models[1]]}
  isMulti
  options={models}
  className="select-custom-class"
  name="form-field-name"
  options={models}
  placeholder="Model: "
/>

我想做一些“芯片风格”的下拉VIA react-select。可能吗？我必须指定哪些样式选项才能像图片上那样圆角？我还想在芯片内添加一些静态文本以始终显示：例如（关于下图）“City: $here_come_the_values”

也许我应该使用另一个反应组件？这些下拉列表的最终目的是对表格进行过滤，所以我想将它们与 react-bootstrap-table2 链接起来。

任何帮助表示赞赏！谢谢。

【问题讨论】：

好的，圆形样式` const Styles = { control: (base, state) => ({ ...base, borderRadius: '16px', '&:hover': {border:' 1px solid #0679A8', } }),` 仍然存在的问题是如何在选择选项时在 react-select 中维护静态文本，为什么我的 multi 在选择时看起来如此糟糕，以及值、默认值、名称和标签之间的差异，我真的无法得到这个。提前致谢。
因为宽度的丑陋。为什么我需要在

标签： reactjs react-select

【解决方案1】：

好吧，实际上我找到了如何制作一个漂亮的 ONE LINE 选择组件，最后带有点（例如扩展运算符或省略号）没有这个的现代 react-jsx 语法

            <Select
                defaultValue={defaultValues}
                closeMenuOnSelect={false}
                isMulti
                options={defaultValues}
                components={{
                    IndicatorSeparator: () => null,
                    DropdownIndicator,
                    ClearIndicator,
                    MultiValueContainer: multiValueContainer
                }}

这里我们返回所有的值

const multiValueContainer = (props) => {
    const label = props.data.label;
    const allSelected = props.selectProps.value;
    const index = allSelected.findIndex(selected => selected.label === label);
    const isLastSelected = index === allSelected.length - 1;
    const labelSuffix = isLastSelected ? ` (${allSelected.length})` : ", ";
    const val = `${label}${labelSuffix}`;
    return val;
};

风格

const styles = {
    control: (base, state) => ({
        ...base,
        borderRadius: '16px',
        border: '1px solid #E5F7FF',
        boxShadow: 'none',
        boxSizing: 'border - box',
        wordWrap: "break-word",
        '&:hover':
            {
                border: '1px solid #0679A8',
            }
    }),
    valueContainer: (provided, state) => ({
        ...provided,
        textOverflow: "ellipsis",
        maxWidth: "90%",
        whiteSpace: "nowrap",
        overflow: "hidden",
        display: "initial"
    })
};

【讨论】：