[Наступив на яму] getCheckboxProps компонента antd Table

Ant Design

предисловие

В последних бизнес-требованиях на основе компонента antd table сделан бэнд.чек об оплатетаблица функций. Одно из требований показано на рисунке ниже. Вам нужно использовать getCheckboxProps, и я глубоко впечатлен этим (pit), поэтому я написал эту статью и поделился ею с вами. В будущем, когда вам нужно будет использовать это API, вы можете делать меньше обходных путей. Время чтения полного текста около 5 минут 😉

Если вам нужен элемент фильтра подэлементов, он становится таким же, как функция выбора всех в верхней части таблицы, со следующими отличиями:

Нажмите "-": будут выбраны все таблицы в подпункте Нажмите «√»: все таблицы в подпункте будут отменены (по сравнению с предыдущим шагом, пользователю нужно еще раз нажать на флажок)

официальная документация

Давайте сначала посмотрим, как компонент ANTD Table описывает эту API

параметр иллюстрировать Типы По умолчанию
getCheckboxProps Конфигурация свойств по умолчанию для полей выбора Function(record) -

Да, ты правильно прочитал, просто так, у тебя много вопросительных знаков, мальчик?

Давайте сначала посмотрим на вопросительные знаки в наших умах

  1. Для чего это
  2. что вернуть
  3. что такое запись
  4. как использовать

расшифровать getCheckboxProps

Давайте рассмотрим вопросы один за другим

функция getCheckboxProps

Хотя этот API назван в честь get, он больше используется для установки в Интернете, как показано на рисунке:

Мое требование на этот раз — использовать этот API для этой похожей функции, поэтому я лично считаю, что более уместно называть этот API setCheckboxProps или resetCheckboxProps.

getCheckboxProps возвращает

getCheckboxProps должен возвращать объект. Кто-то здесь, возможно, пытался вернуть логические значения false/true или даже строки. Кажется, что ошибки нет, и страницу можно использовать в обычном режиме. Но почему я говорю, что он должен возвращать объект? Я пытаюсь вернуть нулевое значение, и будет сообщено о следующей ошибке.

Как видите, одной из функций этой функции является чтение свойства disabled в возвращаемом значении нашего getCheckboxProps. То есть, чтобы эта функция работала, она должна возвращатьobject. Здесь смелое предположение, что у автора должна быть операция, подобная следующему коду, в том месте, где принимается значение функции после возврата этой функции.

// 假设将调用该函数得到的值是 data 
// 假设 data 被 checkBoxporps 所用
const newCheckBoxProps =  Object(
    {},
    checkBoxProps, 
    {...data, disabled: data.disabled, }
)

что такое запись

запись — это значение, которое содержит только имена столбцов, записанные в таблице.Например, наша таблица имеет 4 столбца ABCD, исходные данные имеют ABCDEFG, а запись содержит только ABCD плюс значение идентификатора элемента.

как использовать

После прочтения приведенной выше части возврата у вас могут возникнуть новые вопросы, тогдаObjectКакие еще атрибуты, кроме disabled, должны быть возвращены?

Теперь мы можем вернуться к официальному описанию.选择框的默认属性配置, в сочетании со стилем, смело догадайтесь, что это поле выбора относится не к полю фильтра нашей таблицы Table, а относится к компоненту checkBox в antd.

Давайте посмотрим на документацию в компоненте checkBox.

параметр иллюстрировать Типы По умолчанию
autoFocus получить фокус автоматически boolean false
checked Указывает, выбран ли он в данный момент boolean false
defaultChecked defaultChecked boolean false
disabled состояние отказа boolean false
indeterminate Установите неопределенное состояние, отвечающее только за управление стилем boolean false
onChange Функция обратного вызова при изменении Function(e:Event) -

Давайте попробуем использовать неопределенность для достижения наших целей.

        const flag = 一系列业务逻辑判断
        if (!flag) {
            return { indeterminate: true };
        }
        return { disabled: false };

На данный момент страница будет выглядеть так

По крайней мере, это работает, подтверждает мою идею и показывает, что选择框的默认属性配置Это относится к различным атрибутам в поле множественного выбора.

Тогда давайте посмотрим, как решить эту проблему.Давайте сначала посмотрим на разницу между флажком в неопределенном состоянии и двумя Домами в нашем вышеуказанном состоянии:

нормальная версия

проблемная версия

Можно обнаружить, что рассматриваемая версия на самом деле имеет выбранный стиль состояния, поэтому мы можем переписать его здесь, чтобы получить желаемый эффект~

        const flag = 一系列业务逻辑判断
        if (!flag) { // 如果不满足我业务逻辑 就是要 - 这种交互的勾选框
            return { indeterminate: true,checked: false };
        }
        return { disabled: false };

Категории