Question

这是我的问题。使用＃react-select的当前版本，进行更改时，事件包含值和标签。但是如何设置它以返回更多道具呢？例如，我选择一个邮政编码，但我希望它返回城市和该城市的呼叫代码。我在＃react-select

的options数组中确实有此信息

谢谢。

Answer 1

您需要创建自己的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/

它现在包含值，标签和extraInfo。祝你好运！

反应选择onchange事件的多个属性

1 个答案: