react-select

Question

在我的 react-select 下拉列表中，标签有数百个字符长。在控制芯片中，我想显示下拉列表中内容的较短版本。这可能吗？

编辑：我想设置图块的文字，而不是像素宽度。

Answer 1

解决方案 1

您可以在使用多个值 Select 和道具 styles 时自定义控制芯片的样式，如下例所示：

const customStyles = {

    multiValue: (base, state) => ({
      ...base,
     // set all chips to a maximum of 100 pixels
      maxWidth: "100px"
    })
  };

Here a live example 长标签的较短版本。我放置了特殊（且丑陋）的背景，以便您可以看到每个容器的开始和结束位置。

解决方案 2

根据评论请求，这是削减 selected 选项的替代解决方案。您可以使用属性 components 覆盖组件 MultiValue。在此组件内，您将有权访问选项标签并应用 substring 函数尽可能缩短标签。

const MultiValue = props => {
// truncate the string to 3 characters
   const content = props.children.substring(0, 3);
   return <components.MultiValue {...props}>{content}...</components.MultiValue>;
};

Here a live example 这个替代选项。

解决方案 3

与解决方案 2 的想法相同，如果您事先知道您的选项标签和要显示的作物，您可以在 options 数组中设置一个额外的道具，如下所示：

const options = [
  {
    label:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue sem, bibendum quis mollis amet.",
    // you can name this new prop has you want
    chipLabel: "Lorem ipsum",
    value: "1"
  },
  {
    label:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
    chipLabel: "Sed ut perspiciatis",
    value: "2"
  },
  {
    label:
      "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?",
    chipLabel: "Ut enim",
    value: "3"
  }
];

然后用下面的代码覆盖组件：

const MultiValue = props => (
  <components.MultiValue {...props}>
    {props.data.chipLabel}
  </components.MultiValue>
);

<Select options={options} components={{ MultiValue }} />

Here a live example.

单值的解决方案

如果您想显示与 SingleValue select 选项中不同的值，我建议使用解决方案 3 并像这样更改组件：

const SingleValue = props => (
  <components.SingleValue {...props}>
    {props.data.chipLabel}
  </components.SingleValue>
);

<Select options={options} components={{ SingleValue }} />

这里是live example.

Answer 2

在 React-select V1 中，如果您遇到选择值和下拉列表中显示给用户的选项必须不同的情况。有一个 Props 叫做 valueRenderer。

valueRenderer ：return 是呈现值 selected 的自定义方法的函数。它的签名是函数（选项）{ return option.value //在此处添加任何逻辑以将显示的文本派生给用户 }

https://github.com/JedWatson/react-select/tree/v1.x

react-select - 为下拉菜单和控件显示不同的 text/label？

react-select - Show different text/label for drop-down and Control?

reactjs