Ant Design 表单常用组件总结

Form

通过Form.useForm()对表单数据域进行交互

	const [ form ] = Form.useForm(); // 创建form的控制实例
	
	// form.setFieldsValue 设置表单的值，可以用于表单的回显操作
	form.setFieldsValue({ keyword:'测试' })
	
	// form.getFieldsValue 获取字段名对应的值，
	const keyword = form.getFieldValue('keyword') // 测试
	// 获取一组值
	const data = form.getFieldsValue() // {keyword: '测试'}
	
	// form.validateFields 触发表单验证
	form.validateFields().then(	res => {
		console.log(res) // {keyword: '测试'}
		// 表单验证逻辑
	}).catch(err => {
		// 验证不通过的逻辑
	 	console.log(err) 
	});
	
	// form.resetFields 重置表单
	form.resetFields();
	
	// form.submit 提交表单，走onFinish方法
	<Button onClick={()=>form.submit()}>查询</Button> 
	等同于
	<Button htmlType='submit'>查询</Button>

持续更新…