antd中Form.useForm()使用方式

文章介绍了如何在AntDesign的Table组件中使用onRow属性来处理行级事件,如点击、双击等。同时,详细阐述了Form.useForm在React表单中的应用,包括设置和获取表单值、验证、提交和重置表单的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写自定义目录标题

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"); // yi
const 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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值