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