Antd Table component getCheckboxProps

preface

Recently, based on antD Table component, a table with check function has been made in business requirements. One of the requirements, as shown in the figure below, requires getCheckboxProps. I was so impressed with it that I wrote this article to share it with you, so that you can avoid the pitfalls of using this API in the future. The full text takes about 5 minutes 😉

Want the subitem filter to be the same as the select all function at the top of the table, the difference is as follows:

Click “-” : all subitem tables will be selected click “√” : all subitem tables will be cancelled (compared to the previous step, the user needs to click the check box again)

The official documentation

How does the ANTD Table component describe this API

Yes, that’s it. Do you have a lot of question marks?

Let’s look at the question marks in our minds

1. What does it do
2. What return
3. What is the record
4. How to use

Decryption getCheckboxProps

Let’s look at the problems one by one

GetCheckboxProps role

Although this API is named get, the web is mostly used for set, as shown in the figure below:

I’m going to use the API for a similar purpose this time, so I think it’s more appropriate to call the API setCheckboxProps or resetCheckboxProps.

GetCheckboxProps return

GetCheckboxProps should return an object, maybe someone tried returning false/ True, or even a string, as if the page worked without an error. But why do I say I should return an object? I tried to return a null value, which will report the following error.

As you can see, one of the functions of this function is to read the disabled property in the return value of our getCheckboxProps. That is, for this function to work, it should return an Object. It is a bold conjecture that the author should have something like the following after the function is returned to the place where the value of the function is accepted

// Assume that the function will be called with the value data
// Assume that data is used by checkBoxporps
const newCheckBoxProps =  Object( {}, checkBoxProps, {... data,disabled: data.disabled, }
)
Copy the code

What is the record

Record is a value that only contains the name of the column written in the table, for example, we have a table with ABCD 4 columns, the original data has ABCDEFG, record will only have ABCD, plus an id value of the item.

How to use

After reading the return section above, you may have a new question: what other property of Object should be returned besides disabled?

We can now look at the default property configuration of the checkBox in the official description, and assume that the checkBox does not refer to the filter box in our Table, but to the checkBox component in antD.

Let’s look at the documentation in the checkBox component

Let’s try using IndeTerminate to do what we need

        constFlag = A series of business logic judgmentsif(! flag) {return { indeterminate: true };
        }
        return { disabled: false };
Copy the code

At this point, the page will look like this

At least it works, proving my point of view that the default property configuration of the selection box here refers to the various properties in the multi-selection box.

Then we’ll see how to solve this problem. Let’s first look at the difference between the checkboxes at IndeTerminate and the two Dom states we have above:

Normal version

The problematic version

As you can see, the version in question actually has an extra selected state style, so we can rewrite it to get what we want

        constFlag = A series of business logic judgmentsif(! flag) {// If it doesn't satisfy my business logic is to - check the box for this interaction
            return { indeterminate: true.checked: false };
        }
        return { disabled: false };
Copy the code