react-select - 为下拉菜单和控件显示不同的文本/标签? [英] react-select - Show different text/label for drop-down and Control?

问题描述

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

In my react-select drop-down, the labels are hundreds of characters long. In the Control chips, I would like to show a shorter version of what's in the drop-down. Is this possible?

我想设置芯片的文本，而不是像素宽度.

I want to set the text of the chip, not pixel width.

推荐答案

解决方案 1

当使用多值Select和道具styles时，您可以自定义控制芯片的样式，如下例:

You can custom the style of the control chips when using the multiple value Select with the props styles like the following example:

const customStyles = {

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

这里有一个活生生的例子，是长标签的较短版本.我放置了特殊(且丑陋)的背景，以便您可以看到每个容器的开始和结束位置.

Here a live example of shorter versions of long label. I put special (and ugly) background so you can see where each container starts and ends.

解决方案 2

根据评论请求，这是剪切所选选项的替代解决方案.您可以使用属性 components 覆盖组件 MultiValue.在此组件中，您将可以访问选项标签并应用 substring 函数来尽可能短地截断标签.

Following the comment request this is an alternative solution to cut the selected option. You can overwrite the component MultiValue with the prop components. Inside this component you will have access to the option label and apply substring function to truncate the label as short as you can.

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

这里是此替代选项的实例.

解决方案 3

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

In the same idea as the solution 2 if you know in advance your option labels and the crop you want to display you can set an extra props in your options array like this:

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"
  }
];

然后用以下代码覆盖组件:

And then overwrite the component with the following code:

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

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

这是一个活生生的例子.

单一价值的解决方案

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

If you want to display a different value than in options for SingleValue select I recommend to use the solution 3 and change the component like this:

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

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

这是一个现场示例.

这篇关于react-select - 为下拉菜单和控件显示不同的文本/标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！