Question

我正在尝试使用react-select，https://react-select.com/，并且options道具的强制格式似乎是{value:something, label:something}。

我有一个带有其他键，值对的对象列表，并且我的问题是对我not having to modify the array 是否有任何解决方法，因为如果我对其进行修改，则意味着{{ 1}}将不会返回初始数组的对象，因此我将不得不再次映射它们。

select component

例如，在options = [ {name: 'opt1', descr:'descr1'}, {name: 'opt2', descr:'descr2'}, {name: 'opt3', descr:'descr3'}, ]中，我将选择将用作Vue的{{1}}。

Vue：

key

在做出反应时，我必须做类似的事情：

label

在“选择”中：

:items="options.name"

Answer 1

使用react-select，您可以通过以下方式映射选项：

const options = [
  { val: 'chocolate', desc: 'Chocolate' },
  { val: 'strawberry', desc: 'Strawberry' },
  { val: 'vanilla', desc: 'Vanilla' }
]

<Select
  options={options}
  getOptionLabel={(option)=>option.desc}
  getOptionValue={(option)=>option.val}
/>

Docs

Live Demo

Answer 2

您可以使用索引作为值，然后只需在handleChange函数中获取原始数组元素即可。

<?php if( get_post_meta($post->ID, 'hide_email', false); ?>
    <p>Email: <?php echo get_post_meta($post->ID, 'email', true);?></p>
<?php else : ?>
    <p>Email:<?php echo "Email is private";?></p>
<?php endif;  ?>

然后在handle函数中：

<Select 
    name="selectedWires"
    options={this.options.map((option, idx) => ({
        value: idx,
        label: option.name
    }))} 
    onChange={(selection, action) => this.handleChange(selection, action)}/>

React-Select自定义选项数组？

2 个答案: