我如何使用反应钩子将数据值传递给模态？

Question

我正在使用模态来接受 React 项目中的表单输入

这是计划组件

plan/index.js

import React, { useState } from "react";
import Pay from '../Pay';


const Plan = () => {

  const [payModal, setPayModal] = useState(false);
  const [planMode, setPlanMode] = useState(true);

  return (
  <main class="main">

    {payModal && <Pay setOpenPayModal={setPayModal} />}

  <div class="plan">
   <div>
    <a class="plans" onClick={() => {setPayModal(true);}}>plan A</a>
              
    <div class="plan">
          <span class="plan">{!planMode ? "$19.99" : "$9.99"}</span>
          <span class="plan">{!planMode ? "month" : "year"}</span>
    </div>
   </div>
   <div>
    <a class="plans" onClick={() => {setPayModal(true);}}>plan B</a>
              
    <div class="plan">
          <span class="plan">{!planMode ? "$29.99" : "$19.99"}</span>
          <span class="plan">{!planMode ? "month" : "year"}</span>
    </div>
   </div>


  </div>
  </main>
  );
};
export default Plan;

正如您在{payModal && <Pay setOpenPayModal={setPayModal} />}行上看到的，我从计划组件调用了支付模式组件，它打开了模式

这是支付组件，它是模态组件

pay/index.js

import React, { useState } from "react";



function Pay({ setOpenPayModal }) {

  const [billingDetails, setBillingDetails] = useState({
    price: "",
    : "",
  });

  return (

    <div class="modal">
      <div class="modal">
        <div class="close">
          <button
            onClick={() => {
              setOpenPayModal(false);
            }}
          >
          </button>
        </div>


        <div class="modal">

        <form class="form" onSubmit={handleSubmit}>
            <fieldset class="form">

                <Field
                label="Price"
                id="price"
                type="text"
                value={billingDetails.price}
                onChange={(e) => {
                    setBillingDetails({ ...billingDetails, price: e.target.value });
                }}
                />

                <Field
                label="Frequency"
                id="frequency"
                type="text"
                value={billingDetails.frequency}
                onChange={(e) => {
                    setBillingDetails({ ...billingDetails, frequency: e.target.value });
                }}
                />

            </fieldset>
            <button class="pay" onClick={handleSubmitPay}>
                Pay
            </button>
        </form>

        </div>

      </div>
    </div>
  );
}

export default Pay;

问题是我希望能够将price和frequency从计划组件传递到支付模式组件

例如对于计划 A 是price="$19.99"和frequency="year" ，因此基于在计划组件页面上单击的按钮，这些值以动态方式传递给支付模式组件

我如何使用反应钩子实现这一点？

Answer 1

您可以使用上下文来传递，但在这种情况下，我认为这不是最佳选择。 我真正推荐的是通过道具传递状态变量。

{payModal && <Pay setOpenPayModal={setPayModal} price={price} frequency={frequency} />}

当我需要值和各种组件时，我通常使用上下文（useContext），例如：

• 我需要保存登录到各种组件的用户 ID，而不是每次需要时从服务器获取它，而是将它保存在我创建的上下文中，因此我只能进行一次调用。 文档-> https://pt-br.reactjs.org/docs/context.html