antd组件库使用笔记
1、table表单,开启复选框时,多选删除,删除成功之后需要清除之前已选择的部分。此时需要给table一个
rowSelection属性,属性值里面使用selectedRowKeys和onChange配合使用
并在删除成功后将selectedRowKeys属性值清空即可
selectedRowKeys指定选中项的 key 数组,需要和 onChange 进行配合,其实质和input框的双向数据绑定是一个原理
render() { const { loading, selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const hasSelected = selectedRowKeys.length > 0; return ( <div> <div style={{ marginBottom: 16 }}> <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}> Reload </Button> <span style={{ marginLeft: 8 }}> {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''} </span> </div> <Table rowSelection={rowSelection} columns={columns} dataSource={data} /> </div> ); }
2、form的使用,在使用form表单的组件中,使用Form.create函数处理过的组件会有一个form属性,即this.props.form。此时就可以通过this.props.form来获取表单值等操作
注意在v4版本中,废弃了Form.create转而使用Form.useForm,这两个函数都返回一个form实例
FormInstance
// 获取输入框name的值 this.props.from.getFieldValue("name")
另外:在父组件中也可以获取封装的子组件的ref,父组件想拿到子组件的 ref
,使用 antd 的 Form.create()
包装子组件之后,可以通过包装后的组件的 wrappedComponentRef
拿到子组件的实例
<Row className="table-header-container"> <Col xxl={{ span: 19 }} xl={{ span: 24 }}> <FilterForm //@ts-ignore onSearch={this.onSearch.bind(this)} wrappedComponentRef={(form: any) => (this.filterform = form) } /> </Col> </Row>
3、from表单校验
在做form表单校验时,如下代码,定义校验规则rules时,rules数组中的最后一个规则是无法生效的,原因在于,validator自定义规则必须在rules规则数组的最后一个元素
const rules: any = [ { message: "参数不能为空", required: true, }, { validator: (rule: any, value: any, callback: any) => {} }, { message: "只允许输入整型数字", pattern: new RegExp(/^[1-9][0-9]{0,}$/, "g"), } ]
4、table组件,自定义空状态
ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。
import { ConfigProvider } from 'antd'; // ... export default () => ( <ConfigProvider direction="rtl"> <App /> </ConfigProvider> );
空状态配置使用属性,值为reactNode
renderEmpty
const customizeRenderEmpty = () => ( //这里面就是我们自己定义的空状态 <div style={{ textAlign: ‘center‘ }}> <Icon type="smile" style={{ fontSize: 20 }} /> <p>空状态信息提示</p> </div> ); class Home extends Component{ render() { return( <ConfigProvider renderEmpty={customizeRenderEmpty}> <Table columns={columns} dataSource={data} /> </ConfigProvider> ) } }