react、ant(版本4),使用modal嵌套form表单,使用modal底部的确定按钮提交form表单

重点代码:

const [form] = Form.useForm(); // form-可以任意名称,区分不同Form表单

<Form form={form} ></Form>

import { Form, Input, message, Spin } from 'antd';
const nodeList: React.FC = () => {
  const [form] = Form.useForm(); // 重点这里
  const handleOk = () => {
    // 表单校验
    form
      .validateFields()
      .then(async (values) => {
        // 校验成功
        const result: API.normalResult = await createNodeAPI({...values, clusterId: getData.clusterId})
        if(result && result.success){
          message.success('新增成功');
          getNodeData({ clusterId: getData.clusterId });
          setIsModalOpen(false);
          form.resetFields()
        }
      })
      .catch((err) => {
        // 校验失败
        console.log('err: ', err);
      });
  };

  const handleCancel = () => {
    form.resetFields() // 重置表单
    setIsModalOpen(false);
  };


  return (
    <Modal
        key="addnodemodal"
        title="新增节点"
        forceRender={true}
        destroyOnClose={true}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        // footer={null}
      >
        <div>
          <Form
            form={form} // 重点这里
            key="addnodeform"
            name="新增节点"
            preserve={false}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            // onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="ip"
              name="ip"
              rules={[{ required: true, message: '请输入ip!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="sshUser"
              name="sshUser"
              rules={[{ required: true, message: '请输入sshUser!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="sshPassword"
              name="sshPassword"
              rules={[{ required: true, message: '请输入sshPassword!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="sshPort"
              name="sshPort"
              rules={[{ required: true, message: 'sshPort!' }]}
            >
              <Input />
            </Form.Item>

            {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button key='addnodebtn' type="primary" htmlType="submit">
                确定
              </Button>
            </Form.Item> */}
          </Form>
        </div>
      </Modal>
  )
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Antd,可以使用`form`属性将`Modal`组件的表单与父组件进行关联,然后在`Modal`的确认按钮上通过`form.submit()`方法来获取表单数据。 具体实现步骤如下: 1. 在`Modal`组件添加`form`属性,使表单与父组件进行关联: ```jsx import { Form, Input, Modal } from 'antd'; const MyModal = ({ visible, onCancel, onOk, form }) => { const { getFieldDecorator } = form; return ( <Modal visible={visible} onCancel={onCancel} onOk={onOk} > <Form> <Form.Item label="Username"> {getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username!' }], })(<Input />)} </Form.Item> <Form.Item label="Password"> {getFieldDecorator('password', { rules: [{ required: true, message: 'Please input your password!' }], })(<Input.Password />)} </Form.Item> </Form> </Modal> ); }; export default Form.create()(MyModal); ``` 2. 在`Modal`组件的确认按钮上通过`form.submit()`方法来获取表单数据: ```jsx import { Form } from 'antd'; import MyModal from './MyModal'; const MyParentComponent = () => { const handleSubmit = (e) => { e.preventDefault(); const { form } = myFormRef.current; form.validateFields((err, values) => { if (!err) { console.log(values); // 输出表单数据 form.resetFields(); } }); }; const myFormRef = useRef(null); return ( <div> <button onClick={() => myModalRef.current.showModal()}>Open Modal</button> <MyModal wrappedComponentRef={(form) => myFormRef.current = form} visible={visible} onCancel={() => setVisible(false)} onOk={handleSubmit} /> </div> ); }; export default MyParentComponent; ``` 在上面的代码,我们通过`form.validateFields(callback)`方法来校验表单数据,并且如果校验通过,就可以通过`values`参数获取到表单数据。同时,我们也可以通过`form.resetFields()`方法来重置表单数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值