对不改变状态的父级做出回调

Question

我一生都无法弄清楚为什么这不起作用。 我有一个 WorkoutCard 组件：

锻炼卡：

const key = require('weak-key');

function WorkoutCard({ workout }) {

  const { userID } = useContext(AuthContext);
  const [modalOpen, setModalOpen] = useState(false);
  const closeModalCallback = () => setModalOpen(false);

  return (
    <div className="WorkoutCard" onClick={() => setModalOpen(true)}>
      <div className="header">
        <h2>{workout.name}</h2>
        <h3>Days</h3>
        {workout.days.map((day) => {
          return (
            <p key={key({})}>{day}</p>
          )
        })}
        <button className="deleteButton" onClick={handleDelete}>Delete</button>
      </div>

      <div className="line"></div>

      <div className="exercises">
        <h3>Exercises</h3>
        {workout.exercises.map((exercise) => {
          return (
            <p key={key({})}>{exercise}</p>
          )
        })}
      </div>

      <EditWorkoutModal key={key({})} modalOpen={modalOpen} closeModalCallback={closeModalCallback} />
    </div>
  );
}

export default WorkoutCard;

我有 EditWorkoutModal 组件：

Modal.setAppElement('#root');

function EditWorkoutModal({ modalOpen, workout, closeModalCallback }) {

  const { userID } = useContext(AuthContext);

  return (
    <Modal isOpen={modalOpen} className="editModal">
      <div className="rightHalf">
        <p className='closeButton' onClick={() => closeModalCallback()}>+</p>
      </div>
    </Modal>
  )
}

export default EditWorkoutModal

这里的问题是 closeModalCallback 并没有改变状态。 它被调用，但 modalOpen 仍然设置为 true。

而且，这更令人困惑，因为我有这个功能在应用程序的另一部分工作。 我有一个包含 WorkoutCard 组件和 Modal 的锻炼页面，它以这种方式工作。 但是，WorkoutCard 组件的模式上的 closeModalCallback 将不起作用。

Answer 1

onClick事件使 DOM 冒泡。 例如，请参阅以下代码段（请参阅浏览器控制台以获取输出）：

 const App = () => { const parent = () => console.log("parent"); const child = () => console.log("child"); return <div onClick={parent}> <div onClick={child}>Click me</div> </div> } ReactDOM.createRoot(document.body).render(<App />);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>

以上在控制台中记录了以下内容：

> child
> parent

当您单击子元素时，单击事件会在 DOM 中冒泡，最终通过WorkoutCard类到达您的div ，该类会触发将您的模式打开状态设置为true的onClick 。 您可以通过在关闭模式按钮上调用e.stopPropagation()来阻止事件冒泡：

onClick={(e) => {
  e.stopPropagation();
  closeModalCallback();
}}

这样，事件就不会冒泡到您的父 div 并触发正在更改您的状态的onClick 。