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")

 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"),
         }
]