如何在React的一个模态框组件中存储用户输入的邮箱并在另一个模态框组件中展示

我来帮你搞定这个问题！其实思路很清晰：我们需要把用户在第一个模态框输入的邮箱/账号码传递到父组件存储，再把这个值传给第二个确认模态框来展示。具体改法如下：

步骤1：在父组件添加存储邮箱的状态 #

首先在YourDetails组件里新增一个state，用来保存用户输入的邮箱或账号码，同时修改提交回调函数来接收并存储这个值：

export default function YourDetails() { 
  const [mustLogin, setMustLogin] = useState(true); 
  const [isResettingPassword, setIsResettingPassword] = useState(false); 
  const [hasResetPassword, setHasResetPassword] = useState(false); 
  // 新增状态存储用户输入的邮箱/账号码
  const [resetEmail, setResetEmail] = useState('');
  const navigate = useNavigate(); 

  const proceedToNextStep = () => navigate('/step4'); 
  const displayPaymentForm = () => setMustLogin(false); 
  const openResetPasswordModal = () => setIsResettingPassword(true); 
  const closeResetPasswordModal = () => setIsResettingPassword(false); 
  const openResetPasswordConfirmationModal = () => setHasResetPassword(true); 
  const closeResetPasswordConfirmationModal = () => setHasResetPassword(false); 

  // 修改回调函数，接收模态框传来的邮箱值并存储
  const handleResetPassword = (emailOrAccountCode: string) => { 
    // 先把用户输入的值存入父组件状态
    setResetEmail(emailOrAccountCode);
    // send email to the back end 
    setIsResettingPassword(false); 
    openResetPasswordConfirmationModal(); 
  }; 

  if (mustLogin) { 
    return ( 
      <> 
        <ResetYourPasswordModal 
          isOpen={isResettingPassword} 
          onClose={closeResetPasswordModal} 
          onSubmit={handleResetPassword} 
        /> 
        <ResetYourPasswordConfirmationModal 
          isOpen={hasResetPassword} 
          onClose={closeResetPasswordConfirmationModal}
          // 把存储的邮箱传给确认模态框
          email={resetEmail}
        /> 
      </>
    )
  }
  // 其余原有代码保持不变
}

步骤2：修改确认模态框的接口与展示逻辑 #

接下来调整ResetYourPasswordConfirmationModal，让它能接收父组件传来的邮箱值并展示：

// 修改接口，新增email参数
interface ResetYourPasswordConfirmationModalInterface { 
  isOpen: boolean, 
  onClose: () => void,
  email: string,
} 
export default function ResetYourPasswordConfirmationModal( 
  props: ResetYourPasswordConfirmationModalInterface, 
) { 
  const { isOpen, onClose, email } = props; 
  // 移除无用的本地状态，直接使用props传入的值
  return ( 
    <Modal isOpen={isOpen} closeModal={onClose}> 
      <h1>Email sent</h1> 
      <p>
        {email}, we have sent you an email. 
      </p> 
      <p>Click the reset password button in the email to change your password.</p> 
      <Button type="button" colour="orange" text="OK" onClick={onClose} /> 
    </Modal> 
  ); 
}

思路说明 #

• 父组件作为两个模态框的共同容器，适合承担状态共享的角色，符合React自上而下的数据流原则，避免子组件之间直接通信的复杂度
• 第一个模态框通过onSubmit回调把用户输入的值传递给父组件，父组件将其存入state
• 确认模态框通过props接收父组件存储的值，直接展示即可，无需维护自己的本地状态

这样修改后，用户在第一个模态框输入邮箱并提交，就能在第二个确认模态框里看到对应的邮箱内容啦！

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