我如何從 React 的子組件中更改父組件中的 state？

Question

我有一個包含模態的父組件，我想在子組件中顯示/隱藏元素的 onClick。 我現在基本上如何從子組件點擊中調用母公司中的處理程序？

我的想法是以某種方式通過從父母到孩子的道具提供處理程序：

// parent components
import PlannerDetails from "./PlannerDetails";
import PlannerTools from "./PlannerTools";
import {useState} from "react";

const PlannerWrapper = () => {

    const [showTools, setShowTools] = useState(false)
    const toolsHandler = () => {
        setShowTools(true)
    }

    return (
        <div className="wrapper w-6/6 h-full flex bg-dotted  bg-sx-white">
            <div className="right-wrapper w-3/6 h-full p-8">
                <div className="details-wrapper w-full h-full bg-sx-white-plain rounded-2xl shadow-sx-shadow">
                    <PlannerDetails/>
                </div>
            </div>
            {showTools ? <PlannerTools/> : null}
        </div>
    )
}
export default PlannerWrapper

// child component

import imageEdit from "../../assets/images/edit.svg"

const PlannerDetails = (props) => {

    return (
        <div className="details-wrapper">
            <div className="details-head flex border-b-1 border-b-gray">
                <div className="text-2xl text-sx-purple-dark p-4">Offer Details</div>
                <div className="icon-wrapper flex">
                    <img src={imageEdit} className="w-4 cursor-pointer" 
                     onClick={props.toolsHandler}/> // <--------- click event here
                </div>
            </div>
        </div>
    )
}

export default PlannerDetails

更新方法

// Parent

import PlannerDetails from "./PlannerDetails";
import PlannerTools from "./PlannerTools";
import {useState} from "react";

const PlannerWrapper = () => {

    const [showTools, setShowTools] = useState(false)
    const toolsHandler = () => {
        console.log('test')
        setShowTools(true)
    }

    return (
        <div className="wrapper w-6/6 h-full flex bg-dotted  bg-sx-white">
            <div className="right-wrapper w-3/6 h-full p-8">
                <div className="details-wrapper w-full h-full bg-sx-white-plain rounded-2xl shadow-sx-shadow">
                    <PlannerDetails toolsHandler={toolsHandler} />
                </div>
            </div>
            {showTools ? <PlannerTools/> : null}
        </div>
    )
}
export default PlannerWrapper

// Child

import imageEdit from "../../assets/images/edit.svg"

const PlannerDetails = (toolsHandler, ...props) => {

    return (
        <div className="details-wrapper">
            <div className="details-head flex border-b-1 border-b-gray">
                <div className="text-2xl text-sx-purple-dark p-4">Offer Details</div>
                <div className="icon-wrapper flex">
                    <img src={imageEdit} className="w-4 cursor-pointer" alt="editTools" onClick={props.toolsHandler}/>
                </div>
            </div>
        </div>
    )
}

export default PlannerDetails

Answer 1

你已經很接近答案了，你只需要將父組件中的 function 傳遞給子組件即可。

像這樣

 <PlannerDetails toolsHandler={toolsHandler} />

第一個toolsHandler是子組件中的prop屬性，第二個toolsHandler是父組件中的function。