如何将对象传递给 onchange 函数？ （选择选项）

Question

I have an select dropdown inside a table and when I'm trying to select an option I want to send the whole object to the onchange function. is it possible to send the whole object? how can I achieve this?

this is what i tried.

data = [
{id:1,name:"tasha",code:"T!@#"},
{id:2,name:"dia",code:"ew34"},
{id:3,name:"alex",code:"loiu"},
{id:4,name:"rubee",code:"1234"},
]

const selectUser = (value: any, record: any) =>{
    console.log("selected user details ", value); //if i select first option it will print {id:1 name:"tasha",code:"T!@#"}
    console.log("table record", record);
  }

const column = [
{
      title: "id",
      dataIndex: "id",
      key: "id",
    },
{
      title: "user",
      dataIndex: "user",
      key: "user",
      render: (text: any, record: any) => {
        return (
          <Select
            style={{ width: 120 }}
            onChange={(user) => selectUser(user, record)}
          >
            {data.map((item: any) => {
              return <Option value={item}>{item.name}</Option>;
            })}
          </Select>
        );
      },
    },
]

I'm getting following error

react-dom.development.js:13414 Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name, code}). If you meant to render a collection of children, use an array instead.

but this works fine without giving any errors if I set the value={item.id} but however I want to send the whole object not only the id

Answer 1

You cannot pass an object into value. HTML attributes are written as string/number.

This is your statement with an error:

    return <Option value={item}>{item.name}</Option>;

You can pass in the index or id and make use of it later to access your array. Also suggest to use a unique key for list elements.

data = [
{id:1,name:"tasha",code:"T!@#"},
{id:2,name:"dia",code:"ew34"},
{id:3,name:"alex",code:"loiu"},
{id:4,name:"rubee",code:"1234"},
]

const selectUser = (value: any, record: any) =>{
    console.log("selected user details ", value[userId]); //if i select first option it will print {id:1 name:"tasha",code:"T!@#"}
    console.log("table record", record);
  }

const column = [
{
      title: "id",
      dataIndex: "id",
      key: "id",
    },
{
      title: "user",
      dataIndex: "user",
      key: "user",
      render: (text: any, record: any) => {
        return (
          <Select
            style={{ width: 120 }}
            onChange={(userId) => selectUser(userId, record)}
          >
            {data.map((item: any) => {
              return <Option value={item.id} key={ite.id}>{item.name}</Option>;
            })}
          </Select>
        );
      },
    },
]

If you really want to always pass an object, you can create your own custom component which takes in an object. That will obviously be much more complex than doing the above.