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

Posted 2021-03-19

我对react和react-select也很陌生。当我试图实现一个自定义的组件时，我阅读了很多信息，但它对用户并不友好，我认为。

1. 我想让我的react-select组件以行的形式显示选中的数据。现在它以列的形式显示，我附上了图片。

另外，名称、标签字段的目的是什么？确切的区别是什么？

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

2. 我想做一些 "芯片风格 "的下拉式VIA-select。这可能吗？我需要指定什么样的样式选项才能像图片上的那样圆角？我还想在筹码中添加一些静态文本，以便始终显示：例如（关于下面的图片）"城市：$here_come_the_values"

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

任何帮助都是感激的! 谢谢你的帮助。

答案

好吧，实际上我发现如何用现代的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"
    })
};