This is the 7th day of my participation in the August Text Challenge.More challenges in August

Development requirements: click the button on the list of data for full selection and anti-selection function. When developing front-end projects using the React framework, ant Design’s front-end UI component library is used. In the table component, only clicking the selection box in the table header can achieve the effect of selecting all. However, sometimes according to business requirements, a selection box needs to be added outside the table, and click to achieve the effect of selecting all, as shown in the figure. At this time, you need to go to the additional implementation of the code logic.

​

According to the requirement of the above figure, a check box button needs to be added at the bottom of the chart. When clicking the check box, the function of selecting all data in the list can be realized.

1, The first step: add a checkbox, through its associated API events add an onChange method, triggered when the checkbox state changes; Next, add the checked state and give it a Boolean value

​

2. Step 2 Import the TABLE component and add the rowSelection property to the table component, which indicates whether the table row is selectable.

​

Then define this property, selectedRowKeys: specifies the key array of the selected item, which needs to work with onChange; OnChange: callback when the selected item changes; GetCheckboxProps: Select the default property configuration for the box.

// Select line const {selectedRowKeys} = this.state; const rowSelection = { selectedRowKeys, onChange: this.handleRowSelectChange, getCheckboxProps: record => ({ disabled: record.disabled, }), };Copy the code

Step 3: define a selectAll() method to implement the selectAll method. The data in the method is the data fetched from the interface to the current list, and holds selectedRows in state, which represents the selected row in the current list. The handleRowSelectChange() method takes two arguments, the first an array of the list’s selected indexes and the second the list’s data. HandleRowSelectChange ([],[]) will be passed two empty arrays and the selected state will be unselected when the check box is clicked. Otherwise all data indexes and data are passed in, and the list data is all selected

// selectAll = () => {// data is all the data in the table on this page const {data} = this.props; // selectedRows = state const {selectedRows} = this.state; if(data.length === selectedRows.length){ this.handleRowSelectChange([],[]); Const keys = object.keys (data) const index = [];}else{// Convert String to Number const keys = object.keys (data) const index = []; keys.forEach(item=>{ index.push(Number(item)) }); this.handleRowSelectChange(index,data) } }; HandleRowSelectChange = (selectedRowKeys, selectedRowKeys) SetState ({selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,}) => {// Maintain this state in state. };Copy the code

4, realize CheckBox check state

Const {data} = this.props; const keys = Object.keys(data); let isChecked = null if(keys.length === selectedRowKeys.length){ isChecked=true }else{ isChecked=false }Copy the code