antd中Form.useForm()使用方式

这里写自定义目录标题

onRow

<Table
    // record:点击后获取的数据对象
  onRow={record=>{return{// event获取当前列元素节点，可用 event.target.parentNode获取整行onClick:event=>{},// 鼠标左击onDoubleClick:event=>{},// 鼠标双击onContextMenu:event=>{},// 鼠标右击onMouseEnter:event=>{},// 鼠标移入行onMouseLeave:event=>{},// 鼠标移出行};}}
  onHeaderRow={(columns, index)=>{return{onClick:()=>{},// 点击表头行};}}/>

表单Form.useForm()

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

const[form]= Form.useForm()

经过Form.useForm()创建的form实例中，常用的方法如下

1、form.setFieldsValue()
设置表单的值,更新对应的值

// 只更新相对于的，不用输入全部
form.setFieldsValue({name:"yi",age:1,})

2、form.getFieldValue()
获取对应字段名的值

const name = form.getFieldValue("name");// yiconst age = form.getFieldValue("age");// 1

3、form.getFieldsValue()
获取一组字段名对应的值，并按照对应结构返回

const value = form.getFieldsValue();{name:"yi",age:1}

4、form.validateFields()
触发表单验证

form.validateFields().then(value=>{// 验证通过后进入const{ name, age }= value;
    console.log(name, age);// dee 18}).catch(err=>{// 验证不通过时进入
    console.log(err);});

5、form.submit()
提交表单，与点击 submit 按钮效果相同，会走 onFinish 方法。

<Button onClick={()=> form.submit()}>
  提交
</Button>// 与下面效果一样<Button htmlType="submit">
  提交
</Button>

6、form.resetFields()
重置一组字段到 initialValues。

form.resetFields();