ReactJS：通过 onChange/onClick 从 map 传递 ID

Question

How to get id from clicked items with onChange or onClick, I want to push that specific item which user clicks. Is this totally the wrong way?

my code:

 import React, { useState } from "react"; import "antd/dist/antd.css"; import { Select } from "antd"; import { useHistory } from "react-router-dom"; function EventsSection() { const { Option } = Select; const history = useHistory(); const anarray = [ { name: "obama", address: "usa", id: "81" }, { name: "obama", address: "usa", id: "86" }, { name: "putin", address: "russia", id: "91" }, { name: "erdogan", address: "turkey", id: "31" }, { name: "jebordoq", address: "alien", id: "29" }, ]; const changed = (event: any) => { history.push(`/Detail/${event.id}`); }; return ( <section> <Select className="senderId" style={{ width: "100%" }} placeholder="Hide Me" onChange={changed} open={true} listHeight={350} > {anarray.map((item, idx) => ( <Option style={{ width: "100%", height: "100%" }} className="options" key={idx} value={item.id} > {item.name} <br></br> {item.address} <br></br> </Option> ))} </Select> </section> ); } export default EventsSection;

ask me if needed

Answer 1

Here is the functional code:

import React from "react";
import { Select } from "andt";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams,
  useHistory
} from "react-router-dom";

function EventsSection() {
  const { Option } = Select;
  const history = useHistory();
  const anArray = [
    { name: "obama", address: "usa", id: "81" },
    { name: "obama", address: "usa", id: "86" },
    { name: "putin", address: "russia", id: "91" },
    { name: "erdogan", address: "turkey", id: "31" },
    { name: "jebordoq", address: "alien", id: "29" }
  ];

  const changeHandler = (name) => {
    history.push(`/Detail/${name}`);
  };

  return (
    <section>
      <Select
        className="senderId"
        style={{ width: "100%" }}
        placeholder="Hide Me"
        onChange={changeHandler}
        open={true}
        listHeight={350}
      >
        {anArray.map((item, idx) => (
          <Option
            style={{ width: "100%", height: "100%" }}
            className="options"
            key={idx}
            value={item.name}
          >
            {item.name}
            <br></br>
            {item.address}
            <br></br>
          </Option>
        ))}
      </Select>
    </section>
  );
}

function SlugHandler() {
  let { slug } = useParams();
  return <h3>I am {slug}!</h3>;
}

function BasicExample() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <EventsSection />
        </Route>
        <Route path="/Detail/:slug">
          <SlugHandler />
        </Route>
      </Switch>
    </Router>
  );
}

export default BasicExample;

If you want to keep id just replace the value prop for Options ie value={item.id} , also replace it from the handle function if that is something you are specifically looking for.

Here is the functional codesandbox link:

https://codesandbox.io/s/quizzical-thunder-nl2w5

Answer 2

You can get the id of the element from the event object received by the event handler function. Try using:

const changed = (event: any) => {
  history.push(`/Detail/${event.target.id}`); 
};