antd如何获取模态形式的值

Question

我正在尝试使用 React class 组件和 antd 在模态内创建一个表单，但我找不到获取表单中提交的数据的方法。我试图在 antd modal 中控制 onOk 的 event，但我同样没有数据。

我也找到了一个例子，但是它带有函数组件和钩子Form.useForm()

如果有人可以提供帮助，这里是简单的：Simple

任何提示都会有所帮助，谢谢。

Answer 1

解决方案是隐藏模态的页脚并为表单示例添加提交：

      <Modal
              title={this.props.formTitle}
              visible={this.state.modalVisible}
              confirmLoading={this.state.confirmLoading}
              onCancel={this.handleCancel}
              footer={[]}//this to hide the default inputs of the modal
               >
              <Form
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                  modifier: 'public',
                }}
                onFinish={this.handleOk}>
                <Form.Item
                  name="title"
                  label="Title"
                  rules={[
                    {
                      required: true,
                      message: 'Please input the title of collection!',
                    },
                  ]}>
                  <Input />
                </Form.Item>
                <Form.Item name="description" label="Description">
                  <Input type="textarea" />
                </Form.Item>
                <Form.Item name="modifier" className="collection-create-form_last-form-item">
                  <Radio.Group>
                    <Radio value="public">Public</Radio>
                    <Radio value="private">Private</Radio>
                  </Radio.Group>
                  //this is the submit of the form 
                  <Button key="submit" type="primary" loading={this.state.confirmLoading} htmlType="submit">
                    submit
                  </Button> 
                </Form.Item>
              </Form>
            </Modal>

Answer 2

我使用 Antd 和 React 框架在 TS(JS) 知识有限的情况下自己尝试了这个。

步骤如下

构造一个对象例如：

let obj1 = {
      variableA : "",
      variableB : ""    
}

在您的表单正文中使用

获取值

<Form.Item ... onChange={(event)=>obj1.variableA=event.target.value}/>

在这种情况下，事件关键字将return obj1 中具有来自不同表单的给定输入的实例（例如变量A）的最终输入值，您可以在表单提交完成后以准-java风格。

您可以通过创建 alert(obj1.variableA) 或 console.log 函数来测试它是否是所需的值，在我的例子中它适用于字符串和数字输入。

由于我不是做前端的，所以可能会出现错误，欢迎大家指出。

antd如何获取模态形式的值

How to get values of modal form antd

forms

modal-dialog

reactjs

antd