在Modal中使用了Formik，如何提交？

Posted 2021-12-07 清颖~

在其他组件中操作该组件，我们通常可以用ref.current获取实例，进而调用方法或属性实现。
那么我们就可以给 Form 创建一个ref:
hooks中：

 const formRef = React.useRef();

类组件中：

constructor(props){
	super(props);
	this.formRef=React.createRef();
}

然后，就可以使用ref了，Modal的footer 中：

 		[<Button
          key="save"
          type="primary"
          onClick={() => {
            formRef.current.handleSubmit();
          }}
        >
          保存
        </Button>,
        <Button
          key="reset"
          onClick={() => {
            formRef.current.handleReset();
          }}
        >
          重置
        </Button>,
        ]

完整代码：

const ChargeBackModal = (props) => {
  const formRef = React.useRef();
  // 父组件传入
  const { visible, onClose, cause} = props;
  const initialValues={
	grade:'',
	class:'',
	name:'',
	cause,
  }
  // 渠道交割
  const onSave = async (values) => {
    console.log('values:', values);
    const res = await submitApi(params);
     const { code, message: msg } = res;
     if (code !== '200') {
      message.error(`${msg}||'系统异常'`);
      return;
    }
     message.success(msg);
    onClose();
  };

  const laylout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  return (
    <Modal
      visible={visible}
      title="退单"
      maskClosable
      destroyOnClose
      onCancel={onClose}
      footer={[
        <Button
          key="save"
          type="primary"
          onClick={() => {
            formRef.current.handleSubmit();
          }}
        >
          保存
        </Button>,
        <Button
          key="reset"
          onClick={() => {
            formRef.current.handleReset();
          }}
        >
          重置
        </Button>,
      ]}
    >
      <Form initialValues={initialValues} ref={formRef} {...laylout} onSubmit={onSave}>
        <Form.Item label="年级" name="grade" required />
        <Form.Item label="班级" name="class" required />
        <Form.Item label="姓名" name="name" value={currency} disabled />
        <Form.Item label="原因" name="reamrk" required />
        <Form.Item {...tailFormItemLayout}></Form.Item>
      </Form>
    </Modal>
  );
};
export default ChargeBackModal;

Formik初步使用方法链接： https://blog.csdn.net/aaqingying/article/details/120592207

附上Formik官网链接：https://formik.org/docs/overview