React中如何从渲染的子模态组件获取用户选择结果？

要实现子组件把用户选择的答案传给父组件，核心是通过回调函数实现组件间通信，具体修改步骤如下：

1. 父组件添加回调函数并传递给子组件
   在父组件里定义一个处理子组件返回答案的函数，把这个函数作为props传给子组件，同时可以在函数里关闭模态框优化体验。

2. 子组件调用父组件传入的回调函数
   子组件无需自己维护isAnswer状态（若有内部逻辑需求也可保留，但传递数据核心是调用父组件的回调），点击按钮时直接调用父组件传过来的回调，把选择的true/false传回去。

修改后的完整代码（同时修正原代码里的语法错误）：

// 子组件
export default function Children({ onAnswer }) {
  return (
    <>
      <p>You are about to make a changes</p>
      <button onClick={() => onAnswer(true)}>Yes</button>
      <button onClick={() => onAnswer(false)}>No</button>
    </>
  );
}

// 父组件
function Parent() {
  const [isShow, setIsShow] = useState(false);

  function handleEvent() {
    setIsShow(true);
  }

  // 处理子组件返回的答案
  function handleAnswer(answer) {
    setIsShow(false); // 关闭模态框
    // 这里可以根据answer执行后续逻辑，比如确认修改或取消
    console.log('用户选择了:', answer ? 'Yes' : 'No');
    if (answer) {
      // 执行修改操作的逻辑
    }
  }

  return (
    <>
      <button onClick={handleEvent}>Show Modal</button>
      {isShow && <Children onAnswer={handleAnswer} />}
    </>
  );
}

原代码里的几个小问题说明：

• 子组件函数定义漏了function关键字，正确写法是export default function Children()
• 按钮onClick的箭头函数语法不完整，缺少闭合的)}
• 父组件按钮的onCLick拼写错误，应为onClick
• JSX返回内容需要根元素包裹，用<>空Fragment是最简洁的方式

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