React-select onchange event несколько объектов - PullRequest
Новая
       11

React-select onchange event несколько объектов

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

Вот мой вопрос / проблема.используя текущую версию #act-select, on-change, событие содержит значение и метку.Но как я могу настроить его, чтобы вернуть еще несколько реквизита?Например, я выбираю почтовый индекс, но хочу, чтобы он возвращал город и код вызова для этого города.У меня есть эта информация в массиве опций для #act-select

Спасибо.

1 Ответ

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

Вам нужно создать собственную функцию onChange и передать свои параметры в качестве аргумента этой функции, чтобы вы могли возвращать нужные значения: например, функция _onChange выглядит примерно так:

Я привел пример здесьдля тебя;https://codesandbox.io/s/7qox8on41

import React, { Component } from "react";
import ReactDOM from "react-dom";

import Select from "react-select";

class App extends Component {
  _onChange = (e, options) => {
    const onChangeData = {
      value: e.value,
      name: e.label,
      extraInfo: options.find(item => item.value === e.value).extraInfo
    };
    console.log(onChangeData);
    return onChangeData;
  };

  render() {
    const options = [
      { value: "chocolate", label: "Chocolate", extraInfo: "A" },
      { value: "strawberry", label: "Strawberry", extraInfo: "B" },
      { value: "vanilla", label: "Vanilla", extraInfo: "C" }
    ];
    return (
      <div>
        <Select
          options={options}
          onChange={e => this._onChange(e, options)}
          isMulti={false}
          closeMenuOnSelect={true}
        />
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

или перейдите сюда и откройте консоль, чтобы увидеть зарегистрированный объект, который теперь возвращает onchange, с дополнительной информацией: https://7qox8on41.codesandbox.io/

Теперь она содержит значение,label и extraInfo.Удачи!

...