以 React 形式计算

Question

我正在尝试创建自定义定价表单。买方将能够在其中选择不同的选项。每个选项都有一个相关的价格。选择选项后，表格将自动显示总价。我正在使用 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>

Answer 1

我假设您正在使用带有钩子的反应状态。您需要为此使用反应状态并更改 onChange 事件的价格。我刚刚为你做了一个快速原型。

https://codesandbox.io/s/stackoverflow-calculate-in-react-form-dum7k?file=/src/App.tsx

您只需要在组件安装时为 defaultChecked 产品设置价格。可以通过useEffect实现。