js 有這個結構。
return (
<Container fluid="true" className="h-100">
<Header />
<Row className="contentRow">
<CustomerList />
<DetailPage />
</Row>
</Container>
);
CustomerList 中有很多元素。通過單擊，我想將元素的 ID 發送到 DetailPage 并顯示關聯元素的詳細資訊。但是我在反應方面還是很新的，并且真的不知道如何傳遞資料。或者，如果我什至需要更改組件結構中的某些內容。
uj5u.com熱心網友回復：
您可以使用 event.target.id 屬性。添加一個點擊功能：
onClick={(e) => handleClick(e)}
handleClick = (e) => {
//access e.target.id here
}
uj5u.com熱心網友回復：
您需要在組件中定義一個新的狀態變數。
然后請使用 setter 函式將其傳遞到CustomerList.
定義狀態變數。
const [id, setId] = useState(null);
然后將setter函式傳入<CustomerList />
<CustomerList setId={setId} />
// on CustomerList click event
const onClick = (event) => {
// your logic and use setId from props.
// This is just an example.
props.setId(event.target.value);
}
最后，將idstate 變數傳入<DetailPage />，以便您的DetailPage組件在其 props 中使用。
<DetailPage id={id} />
用途Detailpage：
const DetailPage = (props) => { const id = props.id; // 將 id 用于您的目的。}
uj5u.com熱心網友回復：
看看這是否對您有幫助：
import React, { useState } from "react";
const Header = () => <div />;
const CustomerList = ({ onChange }) => (
<ul>
{["item1", "item2", "item3", "item4"].map((item) => (
<li onClick={() => onChange(item)} key={item}>
{item}
</li>
))}
</ul>
);
const DetailPage = ({ selectedItem }) => <div>{selectedItem}</div>;
const Component = () => {
const [selectedItem, setSelectedItem] = useState(null);
const handleChange = (item) => {
setSelectedItem(item);
};
return (
<div> {/* Container */}
<Header />
<div className="contentRow"> {/* Row */}
<CustomerList onChange={handleChange} />
<DetailPage selectedItem={selectedItem} />
</div>
</div>
);
};
當您點擊某個item時，我們在父組件中設定狀態，然后發送到DetailPage，在DetailPage中，您可以使用這個selectedItem來顯示資訊。您也可以替換["item1", "item2", "item3", "item4"]為一個物件陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463808.html
標籤：javascript 反应