ReactJS：通过onChange / onClick从地图传递ID

Question

如何使用 onChange 或 onClick 从点击的项目中获取 id，我想推送用户点击的特定项目。这完全是错误的方式吗？

我的代码：

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;

如果需要可以问我

Answer 1

您可以从事件处理函数接收到的事件对象中获取元素的id。尝试使用：

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

Answer 2

这里是功能代码：

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;

如果您想保留 id，只需替换 Options 的 value 属性，即 value={item.id}，如果您特别需要，也可以从句柄函数中替换它。

这里是功能代码框链接：

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