reactjs - react 选择-为下拉菜单和控制显示不同的文本/标签？

Question

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

编辑:我想设置芯片的文本，而不是像素宽度。

Answer 1

解决方案 1

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

const customStyles = {

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

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

解决方案2

根据评论请求，这是剪切所选选项的替代解决方案。您可以使用 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 数组中设置额外的 props，如下所示:

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 选项中不同的值，请选择我建议使用解决方案 3 并更改组件，如下所示:

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

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

这里是live example .