首页 > 解决方案 > 是否可以在 React 选择中使用 Array 作为选项

问题描述

我的输入数据是数组格式,例如 ["A","B","C"],我想将它们显示为 react-select 中的选项。

    import React, { Component } from 'react';
import Select from 'react-select';

const test= ["a","b","c"]



class TestSelect extends React.Component {
  state = {
    multi: null,
  };

  handleChange = name => value => {
    this.setState({
      [name]: value,
    });
  };
  render() {
    return (
      <div className='dropdown' style={{ dispay: 'inline-block', width: 250, paddingLeft: 50, paddingTop: 50 }}>
        <Select
          options={test}
          value={this.state.multi}
          autosize={true}
          onChange={this.handleChange('multi')
          isMulti
          placeholder="Select Values"
        />

      </div >
    );
  }
}
export default TestSelect;

是否可以使用数组作为选项,或者它总是应该是一个对象?

标签: reactjsreact-select

解决方案


根据文档,选项的结构必须遵守以下模式 [{label: 'your label', value: 'your value'}, ...]

您将需要像这样转换您的数组:

const options = test.map(v => ({
  label: v,
  value: v
}));

然后将此值作为您的选项传递。

这是您的代码的实时示例


推荐阅读