我正在研究使用模态来接受 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"
,因此基于在计划组件页面上单击的按钮,这些值以动态方式传递给支付模式组件< /strong>
我如何使用 React 钩子来实现这一点?
答案 0 :(得分:0)
您可以使用上下文来传递,但在这种情况下,我认为这不是最佳选择。我真正推荐的是通过 props 传递状态变量。
{payModal && <Pay setOpenPayModal={setPayModal} price={price} frequency={frequency} />}
我通常在需要值和各种组件时使用上下文(useContext),例如: