React formik select 基于另一个 select 的条件

Question

我正在使用 React Formik。我在条件渲染方面有问题我正在使用一种表单，该表单有一个检查字段，该字段被选中并且 selected 框将打开 select 框包含两个字段免费和付费如果他们 select 支付另一个 select 字段要打开。我对第二个 selected 有疑问，因为它们不是条件渲染

codesandbox link 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}

React formik select 基于另一个 select 的条件

React formik select condition based another select

reactjs

formik