[英]ReactJS: Passing ID from map through onChange/onClick
如何使用 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;
問我是否需要
這是功能代碼:
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}
,如果這是您特別尋找的東西,也可以從句柄 function 替換它。
這是功能代碼和框鏈接:
您可以從事件處理程序 function 收到的事件 object 中獲取元素的 id。 嘗試使用:
const changed = (event: any) => {
history.push(`/Detail/${event.target.id}`);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.