Question

如何传递选项以在select中预览图像。我有国家选择，我想预览国旗。我不知道如何通过＆＃34;选项＆＃34;在这种情况下的对象。

    var countries = 
    [
          {value: 'me', label: 'Montenegro'},
          {value:'rs',label: 'Serbia' }
    ];

   <Select name={"nationality_" + passenger.passengerId}
           value={passenger.nationality}
           options={countries}/>

Answer 1

我认为您希望您的选择行为与this demo中的最后一个（自定义占位符，选项，值和箭头组件）相同。 Click here了解他们为演示设计的方式

Answer 2

将国家/地区的标签更改为html。

const options = [
    { value: 'chocolate', label: <div><img src={copyIcon} height="30px" width="30px"/>Chocolate </div> },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];

像这样添加，它将在选择选项中添加图像。

Answer 3

在我的情况下，当我要渲染国家/地区标志时，我只将第三个值添加到单个选项中，如下所示：

var countries = 
[
      {value: 'me', label: 'Montenegro', flagPath: <relative-path-to-flag>},
      {value:'rs',label: 'Serbia', flagPath: <relative-path-to-flag> }
];

如果要在下拉选项中呈现标志，请使用'component.Option'，但不会在所选选项中显示标志，为此，您必须使用'component.SingleValue'，例如：

singleOption = (props: OptionProps<any>) => (
<components.Option {...props}>
  {props.data.flagPath? DO SOMETHING WITH YOUR ICON HERE : null}
  {props.label}
</components.Option>)


singleValue = (props: any) => (
<components.SingleValue {...props}>
  {props.data.flagPath?DO SOMETHING WITH YOUR ICON HERE: null}
</components.SingleValue>

）

然后，您必须使用Select内部的组件，例如：

<Select
      ...
      components={{ 
        Option: this.singleOption, 
        SingleValue: this.singleValue
      }}
    />

希望它将帮助某人解决此问题：）

使用图像填充反应选择

3 个答案: