Reactjs React select onchange事件多属性

Reactjs React select onchange事件多属性,reactjs,select,react-select,Reactjs,Select,React Select,这是我的问题。使用当前版本的react select,一旦更改,事件将包含值和标签。但我如何设置它以返回更多道具?例如,我正在选择一个邮政编码,但我希望它返回城市和该城市的呼叫代码。我在react select的选项数组中确实有这些信息 谢谢。感谢@steve cutter blades的评论,这是正确的,因此我将更新我的答案: 更新日期20-12-2019 onChange函数从作为prop传递的选项返回完整的optionObject。因此,将返回每个选项中的所有键: import React

这是我的问题。使用当前版本的react select,一旦更改,事件将包含值和标签。但我如何设置它以返回更多道具?例如,我正在选择一个邮政编码,但我希望它返回城市和该城市的呼叫代码。我在react select的选项数组中确实有这些信息


谢谢。

感谢@steve cutter blades的评论,这是正确的,因此我将更新我的答案:

更新日期20-12-2019

onChange函数从作为prop传递的选项返回完整的optionObject。因此,将返回每个选项中的所有键:

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

import Select from "react-select";

class App extends Component {

  onChange = (option) => {
    // option.value     -->  "chocolate"
    // option.label     -->  "Chocolate"
    // option.extraInfo -->  "A"
    return option;
  };

  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={this.onChange}
          isMulti={false}
          closeMenuOnSelect={true}
        />
      </div>
    );
  }
}

export default App;

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

我以前的回答很有效,但效果很差。

你能解释一下你的问题并展示一些你尝试过的代码吗?你能分享一下相关的代码以更好地接受我的回答吗?@stephan hovius,可能是重复的感谢。你帮了我很多。没问题D如果你有更多的问题,尽管问他们:等等,我不明白。如果您要查找的信息已附加到您选择的“选项”,则该信息将包含在传递给onChange处理程序的“选项”中。React select不会过滤掉任何关键点,而是传递整个对象,而不管标签/值是什么。至少在当前版本中,无论如何更新了答案。我不敢相信我回答了这个问题。我想我没有足够的经验。。。感谢您关注@Steve-Cutter-Blades