Modal获取Form数据简单demo

前言

使用react+antd+umi新建modal内嵌表单demo。


一、效果展示

完成效果如下图,点击Open Modal,弹出Modal框,Modal框内嵌Form表单,表单提交时控制台获取到表单数据。


二、完整代码及概念总结

1.完整代码

代码如下:

//引入库
import React from 'react';
import {
   Modal, Button, Form, Input, Select, Checkbox} from 'antd';

const layout = {
   
  labelCol: {
   span: 8},
  wrapperCol: {
   span: 16},
};
const tailLayout = {
   
  wrapperCol: {
   offset: 8, span: 16},
};

class Demo extends React.Component {
   
// 为Form建立引用
  form = React.createRef();
// 在state内存储modal的visible值
  state = {
   visible: false};
// 点击submit,form校验成功后获取到form表单的值
  onFinish = () => {
   
    this.form.current.validateFields().then(value => console.log("value :",value));
  };
  render() {
   
    return (
      <>
        <Button type="primary" onClick={
   () => this.setState({
   visible: true})}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={
   this.state.visible}
          onOk={
   (e) => {
   
            console.log(e);
            this.setState({
   
              visible: false,
            });
          }}
          onCancel={
   
            (e) => {
   
              console.log(e);
              this.setState({
   visible: false,
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以!下面是一个简单的例子,展示了如何在模态框中使用 `useMemo` 来优化性能并实现搜索和重置功能: ```jsx import React, { useState, useMemo } from 'react'; import { Modal, Form, Input, Button, Table } from 'antd'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ]; const MyModal = ({ visible, onCancel }) => { const [form] = Form.useForm(); const [searchText, setSearchText] = useState(''); const handleSearch = () => { setSearchText(form.getFieldValue('search')); }; const handleReset = () => { form.resetFields(); setSearchText(''); }; const filteredData = useMemo(() => { if (!searchText) { return data; } return data.filter((item) => { return Object.values(item).some((value) => { return value.toString().includes(searchText); }); }); }, [searchText]); return ( <Modal visible={visible} onCancel={onCancel} footer={null}> <Form form={form} layout="inline"> <Form.Item name="search"> <Input placeholder="Input search text" /> </Form.Item> <Form.Item> <Button type="primary" onClick={handleSearch}> Search </Button> </Form.Item> <Form.Item> <Button onClick={handleReset}>Reset</Button> </Form.Item> </Form> <Table columns={columns} dataSource={filteredData} rowSelection={{ type: 'checkbox', }} /> </Modal> ); }; export default MyModal; ``` 在这个例子中,我们使用了 `useState` 来保存输入框中的搜索文本,并且使用 `useMemo` 来根据搜索文本筛选出符合条件的数据。当用户点击搜索按钮时,我们会更新搜索文本的状态,这会导致 `useMemo` 重新计算过滤后的数据。当用户点击重置按钮时,我们会重置表单和搜索文本的状态。这个例子中的 `Table` 组件还支持选择功能,但这不是本例的重点。 希望这个例子能帮助到你!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值