React formik select条件基于另一个选择

Question

我正在使用react formik。我有条件渲染的问题，我正在工作的一个表单，其中有一个复选字段，该字段被选中，选定的框将被打开，选择框包含两个字段免费和支付，如果他们选择支付另一个选择字段要打开。我有第二个选择的问题，因为它们不是条件渲染的

codesandbox链接https://yvbm3.csb.app/

Answer 1

我认为你的问题出在这个检查上：values.toggle2.paid ?。您正在尝试查看对象toggle2的paid参数是否为真，但它始终是假的，因为toggle2的值是一个字符串。

将您的代码更改为：{values.toggle2 === 'paid' ? (，它应该可以工作。

下面是完整的代码块：

{values.toggle2 === 'paid' ? (
  <label>
    <Field name="toggle3" displayEmpty variant="outlined" as="select">
      <option value="free">Free</option>
      <option value="paid">Paid</option>
    </Field>
  </label>
) : null}