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>
	)
}