ant.d中一个页面中两个表单

ant.d中一个页面中两个表单

1、3.x版本

React实例中使用antd建立表单,我们知道需要

import React, { Component } from 'react'
import { Form } from 'antd'

const UserListAdd = Form.create()(
	class UserAddForm extends Component {
	...
	}
)
export default UserListAdd

这样组件就能获取到props.form的方法,进行后续的表单作业。但是如果一个页面有多个表单怎么办?
这里,我用到了两个表单

createFormFun = type => {
    const CreateForm = Form.create()(props => {
      const { getFieldDecorator } = props.form
      const submitFun = e => {
        e.preventDefault()
        props.form.validateFields((err, values) => {
          if (!err) {
            console.log('校验成功:')
            console.log(values)
            type === 'add' ? this.setState({ addPopVis: false }) : this.setState({ updatePopVis: false })
          }
        })
      }
      const initialName = type === 'add' ? '' : this.state.curTreeNode.title
      return (
        <Form onSubmit={submitFun} className="asset-tree-pop-form">
          <Form.Item>
            {
              getFieldDecorator('name', {
                rules: [{ required: true, message: <FormattedMessage id="common.cantEmpty" values={{name: <FormattedMessage id="common.name"></FormattedMessage>}}></FormattedMessage> }],
                initialValue: initialName
              })(<Input size="small" maxLength={20}></Input>)
            }
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="link">{<FormattedMessage id="common.sure"></FormattedMessage>}</Button>
          </Form.Item>
        </Form>
      )
    })
    return <CreateForm />
  }

这里是Popover里面的表单,添加和编辑按钮显示不同的popover,其中的内容都是一个简单的表单,下面是添加的Popover内容

<Popover
 visible={this.state.addPopVis}
  placement="right"
  trigger="click"
  title="新增树节点"
  onVisibleChange={visible => this.setState({ addPopVis: visible })}
  content={this.createFormFun('add')}>
  <Button type="link"><FormattedMessage id="common.create"></FormattedMessage></Button>
</Popover>

这样,页面就能有两个表单,虽然每个表单不像Vue中那种,有ref来区分,但是也是互相不会影响的。

2、4.0.1版本

还是上面的实例,两个popover都需要一个表单Form,最新的版本不需要上面那样复杂了,拿其中一个为例:

class xxx extends Component {
	// addFormRef可以用来调用表单的内置方法
	addFormRef = React.createRef()
	state = {...}
	addPopVisChange = visible => {
		...
		// 清空表单
		this.addFormRef.current.resetFields()
		// 赋值
		this.addFormRef.current.setFieldsValue({...})
	}
	addNodeFinish = values => {
		// 表单提交操作
		// values就是想要提交的表单内容
	}
	return (
		<div>
			<Popover
				 visible={this.state.addPopVis}
				 placement="right"
				 trigger="click"
				 title="新增树节点"
				 onVisibleChange={this.addPopVisChange}
				 content={
				   <Form
				     onFinish={this.addNodeFinish}
				     ref={this.addFormRef}>
				     <Form.Item
				       name="name"
				       rules={[
				         {required: true, message: '名称不能为空'}
				       ]}>
				         <Input size="small" maxLength={20} />
				       </Form.Item>
				       <Form.Item>
				         <Button htmlType="submit" type="link">确认</Button>
				       </Form.Item>
				   </Form>
				 }>
				 <Button type="link">新建</Button>
				</Popover>
		</div>
	)
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值