React.js中如何从子组件修改父组件状态同步弹窗显示状态

核心结论 #

• React 中子组件不能直接修改父组件的状态，但可以通过父组件传递的回调函数触发父组件状态更新，完全不需要重写现有代码。
• 你当前的问题根源是：弹窗显隐的单一数据源应该是父组件的showAdd状态，你额外在子组件里声明了closeInput状态控制子组件内部隐藏，完全没有修改父组件的showAdd，所以父组件的透明不可点击样式一直生效。

修复步骤 #

1. 修改父组件代码 #

给子组件传递用于关闭弹窗的回调函数，只需要修改调用子组件的一行代码：

// 原来的代码
{showAdd && <Addbirth/> }
// 修改为
{showAdd && <Addbirth onClose={handleClick} /> }

父组件其余代码不需要改动。

2. 修改子组件代码 #

删除冗余的内部显隐状态，直接使用父组件传递的回调方法：

import React from 'react';
import "./addbirthday.css";
import "./home.css";

// 接收父组件传递的onClose方法
export default function Addbirthday({onClose}) {
  return (
    <div className="container">
        <div className="addWrapper homeWrapper">
            {/* 点击时调用父组件传入的关闭方法 */}
            <i className="fas fa-window-close" onClick={onClose} ></i>
            <div className= "addbirth">
                <label>Name</label>
                <input type="text" placeholder="name"/>
                <label>Choose Birthdate</label>
                <input type="date" />
                <label>Relationship</label>
                <input type="text" placeholder="Friend" />
            </div>
            <button className="addBtn" >Add</button>
        </div>
    </div>
  )
}

逻辑说明 #

修改后点击子组件的关闭按钮，会直接触发父组件的handleClick方法，将showAdd改为false：

• 子组件会被直接卸载，不需要自己控制内部显隐
• 父组件的homeWrapper会移除unclickable类，恢复正常可点击状态

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