對于我正在開發的網站，我制作了一個帶有復選框的組件，該復選框觸發了父組件中的狀態更改。我已經通過子組件在控制臺中檢查了狀態已更改，但我希望父組件也能“注意到”更改。我已經嘗試過 useEffect 和 componentDidUpdate 但它們都不會被狀態更改觸發。
為了澄清，結構如下所示：
Parent：有初始狀態 Child：通過parent獲取狀態，改變狀態
在頁面重繪 時，父級會注意到狀態更改，但我希望無需重繪 頁面即可。
我希望這是有道理的，提前謝謝你:)
uj5u.com熱心網友回復：
這是你想要的？
import React, { useState } from "react";
const Parent = () => {
const [someState, setSomeState] = useState("Initial Some State");
const onChangeSomeState = (newSomeState) => {
setSomeState(newSomeState);
};
return (
<div>
Parent:
<Child
someState={someState}
onChangeSomeState={onChangeSomeState}
></Child>
</div>
);
};
const Child = ({ someState, onChangeSomeState }) => {
const handleChangeStateClick = () => {
onChangeSomeState("New Some State from Child");
};
return (
<div>
Child:{someState}
<input
type="button"
onClick={handleChangeStateClick}
value="Change state from Child"
></input>
</div>
);
};
export default Parent;
uj5u.com熱心網友回復：
如果我正確理解了您的問題，您可以將回呼函式傳遞給子組件。這樣，您將收到來自父組件回呼的值，如下所示：
const ParentComponent = () => {
const [someState, setSomeState] = useState()
const childCallback = (value) => {
setSomeState(value)
}
return <ChildComponent callback={childCallback} />
}
uj5u.com熱心網友回復：
React 的本質意味著資料沿著 dom 樹向下流動。使用道具可以做到這一點。
當 props 發生變化時，react 會注意到它，這會導致 props 的接收者重新渲染。但是，正如您所發現的，這是一種單向的關系，只有父母對孩子。
javascript 的美妙之處在于您可以像對待字串或數字一樣對待函式并傳遞它們。在這種情況下作為道具。
因此，雖然孩子不能直接“告訴”父母發生了某些變化，但父母可以傳入一個函式，孩子可以使用該函式來告知變化。
這種從父級傳遞值和子級可以用來通知父級的“處理程式”函式的模式非常常見，并且是一個很好的模式，你可以理解。
以標準文本輸入為例。
const Parent = () => {
// This is our parent's state
const [inputValue, setInputValue] = useState('hello world');
// This is the handler we will give to the child to let us know of changes
const handleInputChange = (e) => setInputValue(e.target.value)
return <input
value={inputValue}
onChange={handleInputChange}
/>
}
在上面的示例中，孩子（輸入）發生變化時將呼叫提供給它的函式，這將更新父母的狀態。react 組件上的任何狀態更新（就像 prop 更改一樣）將導致重新渲染，因此會導致視覺更新。
我在您自己撰寫的任何孩子中使用了一個內置<input>函式，當您想讓父母知道發生了什么事時，您只需要接受您在孩子內部呼叫的“處理函式”即可。
uj5u.com熱心網友回復：
據我了解，如果我沒有弄錯，我認為您應該將觸發事件從父級傳遞給子級作為道具。
父級（功能組件 鉤子）：
const [ userName, setUserName ] = useState("");
return(
<Child doChangeProps={setUserName} />
)
孩子（功能組件 鉤子）：
const { doChangeProps } = props;
return(
<input onChange={ e => { doChangeProps(e); } } />
)
或者，您可以將背景關系用于更簡單的資料流。
uj5u.com熱心網友回復：
function ParentComponent(){
const [state, setState] = useState()
useEffect(() => {
console.log({ state });
},[state])
return <ChildComponent state={state} setState={setState} />
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/472643.html
標籤：javascript 反应 组件 状态 亲子