记录学习React-antd 4x版本 Form表单的提交和重置功能
- 提交功能
class FilterFrom extends React.Component {
baseFrom = React.createRef()
点击事件
onCheck = async () => {
try {
const values = await this.baseFrom.current.validateFields();
console.log('Success:', values);
message.success('提交校验成功')
} catch (errorInfo) {
console.log('Failed:', errorInfo);
message.warn('提交校验失败')
}
};
render(){
return(
<Form ref={this.baseFrom} layout="inline" name="baseForm">
<Button type="primary" htmlType="submit" onClick={this.onCheck} style={{ margin: '0 20px' }}>查询</Button>
<Button htmlType="button" >重置</Button>
</Form>
)}
}
特殊情况: 例如modal框点击会返回 Promise {<pending>} 需要解析 promise
要用 then接收
或者
async await解析
let cityInfo = this.userForm.current.validateFields();
cityInfo.then((res) => { console.log(res) }); //我是用的这个方法
- 重置功能
之前的this.props.form.resetFields() 已经不实用了,
虽然我知道有办法可以弄,
但是我找了很久也没有找到,所以放弃了,
(拒绝直接把查询的值参数变为0!!!!)
接下来是4x常用的方法