reactjs - 以 React 形式计算
问题描述
我正在尝试创建自定义定价表单。买方将能够在其中选择不同的选项。每个选项都有一个相关的价格。选择选项后,表格将自动显示总价。我正在使用 GatsbyJS。
<form>
<div className="form-group">
<label>Beaf</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="50 USD" checked />
<label class="form-check-label" for="exampleRadios1">
Cheap Beaf
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="100 USD" />
<label class="form-check-label" for="exampleRadios2">
Expensive Beaf
</label>
</div>
</div>
<div className="form-group">
<label>Cheese</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="40 USD" checked />
<label class="form-check-label" for="exampleRadios1">
Cheap Cheese
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="80 USD" />
<label class="form-check-label" for="exampleRadios2">
Expensive Cheese
</label>
</div>
</div> <div className="form-group">
<label>Bread</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="30 USD" checked />
<label class="form-check-label" for="exampleRadios1">
Cheap Bread
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="60 USD" />
<label class="form-check-label" for="exampleRadios2">
Expensive Bread
</label>
</div>
</div>
<label>Total Price</label>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly />
</form>
解决方案
我假设您正在使用带有钩子的反应状态。您需要为此使用反应状态并更改 onChange 事件的价格。我刚刚为你做了一个快速原型。
https://codesandbox.io/s/stackoverflow-calculate-in-react-form-dum7k?file=/src/App.tsx
您只需要在组件安装时为 defaultChecked 产品设置价格。它可以通过 useEffect 来实现。
推荐阅读
- python - 我设置了一个密钥,但不断收到错误“RuntimeError:使用 CSRF 需要密钥”。
- kubernetes - 创建错误:pod 被禁止:
配额失败: :必须指定limits.memory - javascript - ReferenceError:未定义进度(tesseract)
- apache-camel - Apache Camel 的培训和认证
- php - Shopware 6 中是否存在订单状态更改事件?
- git - 未跟踪和同时删除(git)
- reactjs - 如何重新渲染依赖于地图状态的反应组件部分
- python - 取满足条件的索引的位置
- swift - 将属性映射到 Swift 中的另一个对象
- asp.net-core - 如何正确地将数据库中的数据输出到剃须刀