如何使react-select始终显示选项列表

Question

如何使react-select总是显示选项列表默认情况下，它会在您单击数组按钮或开始键入某些内容时切换

​

var Select = require('react-select');

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

function logChange(val) {
  console.log('Selected: ', val);
}

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

​

Answer 1

如果你想在不点击选择列表的情况下显示所有选项，你可以做一件事。

打开select on Focus并给出默认的Focus来选择它的底座，如下所示。

var Select = require('react-select');

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

function logChange(val) {
  console.log('Selected: ', val);
}

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
  openOnFocus={true}
  autofocus={true}
/>

从列表中选择选项后，将显示所选值，其他值自动丢弃。

Answer 2

Use props defaultMenuIsOpen这将使dropdown默认打开

<Select
  defaultMenuIsOpen
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>