reactjs - 使用 formik 单击新的选择下拉菜单后 Recat 复选框

Question

我正在尝试构建一个表单，该表单在选中时具有一个复选框字段，使用 formik 将出现另一个新的选择字段。

标签： reactjsformikformik-material-ui

Answer 1

这是一个简单的方法

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

const Basic = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
        toggle: false,
        toggle2: false,
      }}
      onSubmit={async (values) => {
        await sleep(500);
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ values }) => (
        <Form>
          {/* 
            This first checkbox will result in a boolean value being stored. Note that the `value` prop
            on the <Field/> is omitted
          */}
          <label>
            <Field type="checkbox" name="toggle" />
            {`${values.toggle}`}
          </label>
          {values.toggle ? (<label>
            <Field type="checkbox" name="toggle2" />
            new toggle          </label>):null}
         
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

ReactDOM.render(<Basic />, document.getElementById('root'));