React中如何使用Hooks在两个子组件内修改父组件状态

React父子组件通信修改父组件状态的核心逻辑是：父组件将状态更新方法通过props传递给子组件，子组件触发交互时调用该props方法并传入目标状态值即可。你当前的父组件已经完成了状态更新方法的定义和传递，只需调整子组件代码接收props并绑定点击事件即可。

import React from 'react'
// 移除无用的Manager导入，子组件无需引入父组件

// 组件入参接收父组件传递的onClick方法
function BasePage({ onClick }) {
    return (
        <div>
            <fieldset>
                <legend>Search</legend>
                <input placeholder="Enter name to search" type="text" />
            </fieldset>
            <br />
            {/* 点击按钮时调用父组件传入的方法，传入要切换的目标mode值 */}
            <button onClick={() => onClick('add-record-form')}>Add</button>
        </div>
    );
}

export default BasePage

• 你父组件中定义的handleChangePageClick方法会接收mode参数并更新自身状态，该方法通过onClick属性传递给子组件后，子组件调用时传入的参数会直接被该方法接收
• 如果要实现AddRecordForm组件的反向切换，只需要在该子组件的返回按钮点击事件中，调用传入的onClick方法并传入base-page即可

优化提示：可以将传递的props命名为switchMode等语义化名称，避免和DOM原生onClick事件命名混淆，代码可读性更高。

内容的提问来源于stack exchange，提问作者Mojtaba Sedighi