Как я могу работать только со значениями в active-select onChange и значением prop? - PullRequest
Новая
       23

Как я могу работать только со значениями в active-select onChange и значением prop?

0 голосов
/ 23 октября 2018

Я пытаюсь использоватьact-select в своем приложенииactjs, но у меня проблема с событием onChange.OnChange должен отправить два аргумента.Первое должно быть выбранным значением, но вместо выбранного значения весь элемент параметра передается в качестве выбранного значения.

Например,

  • У меня есть массивтакие опции, как options=[{ id: '1', name: 'A'},{ id: '2', name:'B'}]
  • Я устанавливаю getOptionValue = (i) => i.id; и getOptionLabel = (i)=>i.name;
  • При выборе второго элемента onChange(value) передается второй параметр в качестве аргумента value ({id:'2',name:'B'}) вместо значения второй опции ('2').

Это поведение несовместимо с большинством компонентов ввода.Я ожидал бы, что onChange будет передано значение элемента, а для самого элемента я бы ожидал другое событие, например onItemSelected или что-то подобное.

Кроме того, когда я установил value={'2'} (контролируемыйкомпонент), компонент не показывает выбранный элемент.

Я должен сказать, что я использую AsyncSelect с loadOptions.

Как я могу заставить его работать с простыми значениями, а не с объектами опций?

Если этого не произойдет, мне придется отказаться от выбора реакции для другого аналогичного компонента.

1 Ответ

0 голосов
/ 08 ноября 2018

AFAIK в настоящее время нет способа заставить React-Select работать внутри с одним значением.Что я делаю в своем приложении, так это реализую слой для извлечения объекта, падающего вниз, и извлечения значения, идущего вверх.Примерно так (это упрощено, вам может потребоваться дополнительная проверка или обработка в зависимости от вашего приложения): 

const Select extends Component {
  handleChange(newSelected) {
    // this.props.handleChange is your own function that handle changes
    // in the upper scope and receives only the value prop of the object
    // (to store in state, call a service, etc)
    this.props.handleChange(newSelected.value);
  }

  render() {
    // Assuming you get the simple value as a prop from your store/upper 
    // scope, so we need to retrieve the option object. You can do this in 
    // getDerivedStateFromProps or wherever it suits you best
    const { options, value } = this.props;
    const selectedOption = options.find(option => option.value === value)

    <ReactSelect
      options={options}
      value={selectedOption}
      onChange={this.handleChange}
      {...props}
    />
}
...