Question

在我的“反应选择”下拉列表中，标签长数百个字符。在“控制”芯片中，我想显示下拉菜单中的简短版本。这可能吗？

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

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

在评论请求之后，这是削减所选选项的替代解决方案。您可以使用道具MultiValue覆盖组件components。在此组件内，您将可以访问选项标签并应用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选项不同的值，请选择“我建议使用解决方案3并更改组件，如下所示：

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

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

这里是live example。

Answer 2

在React-select V1中，如果遇到以下情况：“所选值”和下拉菜单中向用户显示的选项必须不同。有一个名为valueRenderer的道具。

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

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

react-select-为下拉菜单和控件显示不同的文本/标签？

2 个答案: