useRefまたはuseImperativeHandleなしでReactの子コンポーネントから親に関数を渡す方法
3357 ワード
親に
デモ: https://jscomplete.com/playground/s732915
useState
を追加し、子にセッターを与えるだけです.function Parent() {
const [api, setApi] = useState()
return <>
<button onClick={()=>api.doAlert()}>Trigger alert in child</button>
<Child setApi={setApi}/>
</>
}
function Child({setApi}) {
const [counter, setCounter] = useState(0)
const doAlert = () => alert("counter is " + counter)
useEffect(() => setApi({doAlert}), [counter])
return <button onClick={() => setCounter(c => c + 1)}>
Increment child counter
</button>
}
デモ: https://jscomplete.com/playground/s732915
Reference
この問題について(useRefまたはuseImperativeHandleなしでReactの子コンポーネントから親に関数を渡す方法), 我々は、より多くの情報をここで見つけました https://dev.to/qpwo/how-to-pass-functions-from-child-component-to-parent-in-react-without-useref-or-useimperativehandle-mc3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol