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