在项目中,经常会用到子组件向父组件传递表单的值,并且在父组件点击按钮时,触发子组件表单的验证
子组件:
表单用ref={this.formRef}创建一个react表单容器,当页面加载完时,调用父组件的onSubmit方法,将onFinish方法传递给父组件
formRef = React.createRef()
componentDidMount() {
this.props.onSubmit(this.onFinish)
}
onFinish=()=>{
this.props.getSubmitReq()
}
<Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
<Form.Item name='username' label='用户名'
rules={[{ required: true, message: '请输入用户名' },
{min:1,message:'用户名不能少于一位!'},
{max:10,message:'用户名不能多于10位!'},
{pattern:/^[a-zA-Z0-9_]+$/,message:'用户名只能由数字,字母,下划线组成!'}]}>
<Input placeholder='请输入用户名' />
</Form.Item>
<Form>
父组件:
this.userFormRef.current.formRef.current.submit()
触发form表单的提交验证方法
this.userFormRef.current.formRef.current.getFieldsValue()
得到表单的值
this.userFormRef = React.createRef()
//将子组件传递的onFinish方法放在state
onSubmit = (onFinish) => {
this.setState({
onFinish
})
}
//得到表单对象的值
getSubmitReq=async ()=>{
const formData = this.userFormRef.current.formRef.current.getFieldsValue()
const result = await reqAddUser(formData)
if (result) {
this.setState({
modalStatus: 0
})
this.getUserList()
}
}
//点击提交按钮时触发该方法,触发表单提交事件,表单提交事件会触发onFinish()
comformAddUser = () => {
this.userFormRef.current.formRef.current.submit()
}
//引入子组件
<AddUser ref={this.userFormRef} onSubmit={this.onSubmit} getSubmitReq={this.getSubmitReq}/>