Javascript 如何使用React中的挂钩更改两个子组件中的父状态？

我有一个管理器组件，它是父组件，具有模式状态。
它有条件地呈现与其状态相关的两个不同组件，
我希望当用户单击子组件中的“添加”按钮时，父组件的状态会发生更改。
对于其他同级组件，也可以使用vica versa。
你们能帮我解决我的问题吗，我的意思是我应该如何通过点击按钮来改变子组件中的父状态

如果你帮我一个孩子，我也会帮另一个孩子

这是父组件：

import {React, useState} from 'react'
import BasePage from './BasePage'
import AddRecordForm from './AddRecordForm'

function Manager() {
    const [mode, setMode] = useState('base-page');
    
    function handleChangePageClick(Mode) {
        setMode(Mode);
    }
    return (
        <div>
            <h1>My PhoneBook</h1>
            {mode === 'base-page' ? <BasePage onClick = {handleChangePageClick} /> : <AddRecordForm onClick = {handleChangePageClick} />}
        </div>
    );
}

export default Manager

从'React'导入{React，useState}
从“./BasePage”导入BasePage
从“./AddRecordForm”导入AddRecordForm
职能经理（）{
const[mode，setMode]=useState（'base-page'）；
功能手柄更改页面点击（模式）{
设置模式（模式）；
}
返回(
我的电话簿
{mode==='base page'？：}
);
}
导出默认管理器

这是它的一个孩子：

import {React, useState} from 'react'
import Manager from './Manager'

function BasePage() {
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input placeholder = "Enter name to search" type = "text" />
    </fieldset>
            <br />
        <button onClick>Add</button>
        </div>
    );
}

export default BasePage

从'React'导入{React，useState}
从“./Manager”导入管理器
函数BasePage（）{
返回(
搜寻


添加
);
}
导出默认基页

我建议您使用props中父级提供的钩子或回调函数。 对于useContext钩子，它将为组件及其所有子组件放置一个可用的数据

反之亦然，渲染父组件将自动重新渲染子组件

这将帮助您

我建议您使用props中的hook或父级提供的回调函数。 对于useContext钩子，它将为组件及其所有子组件放置一个可用的数据

反之亦然，渲染父组件将自动重新渲染子组件

---

这将帮助您

而不是像您在这里所做的那样向组件添加onClick事件：

<BasePage onClick={handleChangePageClick} />

---

与在组件中添加onClick事件不同，您可以执行以下操作：

<BasePage onClick={handleChangePageClick} />

---

只需使用传递给孩子的处理程序，如下所示：

import {React, useState} from 'react'
import Manager from './Manager'

function BasePage({ onClick }) {
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input placeholder = "Enter name to search" type = "text" />
    </fieldset>
            <br />
        <button onClick={() => onClick('add-record-form')}>Add</button>
        </div>
    );
}

export default BasePage

从'React'导入{React，useState}
从“./Manager”导入管理器
函数基页（{onClick}）{
返回(
搜寻


onClick（'add-record-form'）}>add
);
}
导出默认基页

只需使用传递给孩子的处理程序，如下所示：

import {React, useState} from 'react'
import Manager from './Manager'

function BasePage({ onClick }) {
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input placeholder = "Enter name to search" type = "text" />
    </fieldset>
            <br />
        <button onClick={() => onClick('add-record-form')}>Add</button>
        </div>
    );
}

export default BasePage

从'React'导入{React，useState}
从“./Manager”导入管理器
函数基页（{onClick}）{
返回(
搜寻


onClick（'add-record-form'）}>add
);
}
导出默认基页

谢谢您的帮助。我只需要使用useState和useEffect，然后我想您需要使用一个回调函数来更改父状态，并通过道具将其传递给您的子组件。谢谢您的帮助。我只需要使用useState和useEffect，然后我想您需要使用一个回调函数来更改父状态，并通过props将其传递给您的子组件。