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

我对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: "
/>

this is my current ugly react-select multi

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

this is what I want

也许我应该使用另一个 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"
    })
};

给TA打赏
共{{data.count}}人
人已打赏
解决方案

基于行和列的算法,将一个特定的值插入到一个单链表中。

2022-4-22 11:08:58

解决方案

字典格式的Json文件数据

2022-4-22 11:09:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索