传递整个选定的对象数据on Change

Question

let arr=[{name:'trtr', ID:5}, {name:'FGF', ID:8},{name:'adaf', ID:4}, {name:'tyhrf', ID:7}]
<Select size="small"
                placeholder="Select..."
                allowClear
                showSearch
                onChange={(name) => this.filterGroupRecord(Group)}
                value={this.state.arrselected}
                dropdownMatchSelectWidth={false}
                style={{ width: 250, marginLeft: 8, marginRight: 8 }}
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }>
                {arr && this.arr.map((dd) => dd.name && <Select.Option value={dd.name}>{dd.name}</Select.Option>)}

              </Select>

我想在Onchange中传递选定的名称和整个对象。但这只会得到名字。如何传递整个选定的对象数据？

Answer 1

您可以将ARR对象作为字符串值传递为选项值中的字符串值，您可以找到一个工作示例在这里

import React, { useState } from "react";
import "antd/dist/antd.css";
import { Select } from "antd";

let arr = [
  { name: "trtr", ID: 5 },
  { name: "FGF", ID: 8 },
  { name: "adaf", ID: 4 },
  { name: "tyhrf", ID: 7 }
];

const App = () => {
  const [arrselected, setArrSelected] = useState({});

  const filterGroupRecord = (data) => {
    console.log(JSON.parse(data));
    setArrSelected(data);
  };

  return (
    <Select
      size="small"
      placeholder="Select..."
      allowClear
      showSearch
      onChange={(data) => filterGroupRecord(data)}
      value={arrselected}
      dropdownMatchSelectWidth={false}
      style={{ width: 250, marginLeft: 8, marginRight: 8 }}
      filterOption={(input, option) =>
        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    >
      {arr &&
        arr.map(
          (dd) =>
            dd.name && (
              <Select.Option value={JSON.stringify(dd)}>
                {dd.name}
              </Select.Option>
            )
        )}
    </Select>
  );
};

export default App;

Answer 2

我希望这会有所帮助，您也可以在此链接

let arr=[{name:'trtr', ID:5}, {name:'FGF', ID:8},{name:'adaf', ID:4}, {name:'tyhrf', ID:7}]

<Select size="small"
    placeholder="Select..."
    allowClear
    showSearch
    onChange={(event) => this.filterGroupRecord(JSON.parse(event))}
    value={this.state.arrselected}
    dropdownMatchSelectWidth={false}
    style={{ width: 250, marginLeft: 8, marginRight: 8 }}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }>
  {arr && this.arr.map((dd) => dd.name && <Select.Option value={JSON.stringify(dd)}>{dd.name}</Select.Option>)}

</Select>