Pass whole selected object datas on onchange-CodePudding

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>

I want to pass selected name and whole object in onchange. But it only getting name. How to pass whole selected object datas?

CodePudding user response：

you can pass arr object as a string value in the option value you can find a working example here

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;

CodePudding user response：

I hope this would be helpful, also you can see the example on this link

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>