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();