我想從子組件到父組件獲取價值。
這是我的代碼。
//這是子組件
import { React } from "react";
const Tab = () => {
const changeTab = (index) => {
console.log(index);
};
return (
<>
<div className="flex gap-10">
<button
onClick={() => changeTab(1)}
className="bg-gray-700 p-2 text-white"
>
btn1
</button>
</div>
</>
);
};
export default Tab;
//這是父組件
import React from "react";
import Nav1 from "./Components/Navbar/Nav1";
import Tab from "./Tab";
const App = () => {
return (
<>
<Tab />
<div>
<Nav1 />
</div>
</>
);
};
export default App;
我想在來自孩子的父組件中記錄索引的值。
uj5u.com熱心網友回復：
在父組件中定義changeTab并通過 props 傳遞給Tab.
家長：
import React from "react";
import Nav1 from "./Components/Navbar/Nav1";
import Tab from "./Tab";
const App = () => {
const changeTab = (index) => {
console.log(index);
};
return (
<>
<Tab changeTab={changeTab}/>
<div>
<Nav1 />
</div>
</>
);
};
export default App;
和子組件：
import { React } from "react";
const Tab = ({changeTab}) => {
const onChangeTab = (index) => {
changeTab(index);
// other stuff
};
return (
<>
<div className="flex gap-10">
<button
onClick={() => onChangeTab(1)}
className="bg-gray-700 p-2 text-white"
>
btn1
</button>
</div>
</>
);
};
export default Tab;
uj5u.com熱心網友回復：
您可以使用背景關系 API：
https://reactjs.org/docs/context.html
或者您可以將 changeTab 函式傳遞給父組件并將其作為 prop 傳遞
uj5u.com熱心網友回復：
您的問題很常見（大多數人）。解決方案是提升狀態（React docs）。這基本上意味著，您必須維護父組件中的狀態并將值和方法傳遞給子組件。
// App.jsx
import React from "react";
import Nav1 from "./Components/Navbar/Nav1";
import Tab from "./Tab";
const App = () => {
const changeTab = (index) => {
console.log(index);
};
return (
<>
<Tab handleTabChange={changeTab}/>
<div>
<Nav1 />
</div>
</>
);
};
export default App;
import { React } from "react";
const Tab = (props) => {
const changeTab = (index) => {
props.handleTabChange(index);
};
return (
<>
<div className="flex gap-10">
<button
onClick={() => changeTab(1)}
className="bg-gray-700 p-2 text-white"
>
btn1
</button>
</div>
</>
);
};
export default Tab;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486790.html
標籤：javascript 反应 反应钩子
上一篇：如何獲得陣列的真實結果總數？