Antd RadioButton не проверяется программно

Используя antd, у меня есть простая RadioGroup, состоящая из трех RadioButton. Все работает, я ожидаю.

Кроме того, я определил кнопку, которая должна очищать выбранную кнопку и возвращать RadioGroup к значениям по умолчанию. Это не работает. Базовые данные в порядке, но RadioButton по умолчанию не проверяется визуально.

Самый правый RadioButton используется по умолчанию. Выбор любого из двух других и нажатие кнопки «Очистить» не проверяет крайний правый RadioButton.

Я смотрел на эту проблему в течение нескольких дней и не вижу своей ошибки. Код немного зашумлен, потому что задействована база данных.

Коды и песочница

import React, { useState, useEffect, Fragment } from 'react';
import { Radio } from 'antd';
import { ConsoleLog } from './consoleLog';
const RadioGroup = Radio.Group;
const App = () => {
  const [filters, setFilters] = useState(false);
  const initFilters = {
    wireSizeId: { displayValue: '', type: 'num', dbKey: '' },
    colorId: { displayValue: '', type: 'num', dbKey: '' },
    insulationId: { displayValue: '', type: 'num', dbKey: '' },
    wireTypeId: { displayValue: '', type: 'num', dbKey: '' },
    solidStranded: { displayValue: '', type: 'num', dbKey: null },
    copperAlum: { displayValue: '', type: 'num', dbKey: null },
  };
  useEffect(() => {
    setFilters(initFilters);
  }, []);
  useEffect(() => {
    if (filters) {
      console.info('e1', filters);
  }}, [filters]);
  const handleClearFilters = () => {
    console.info('clear1', filters);
    setFilters(initFilters);
  };
  const handleCheckbox = (props) => {
    console.info('checkbox', filters);
    console.info('checkbox', props.target.name, props.target.value, props.target.id);
        let updated = {};
        updated[props.target.name] =
             { displayValue: props.target.id, type: 'num', dbKey: props.target.value };
        console.info(updated);
    setFilters({...filters, ...updated});
  };
  return (
    (filters?<Fragment>
   <ConsoleLog>Render</ConsoleLog>
      <div>
        <ConsoleLog>Radio {filters['solidStranded'].dbKey}</ConsoleLog>
        <RadioGroup
          name='solidStranded'
          onChange = {handleCheckbox}
          defaultValue=''
          >
          <Radio
            value='0'
            id='Solid'
            checked = {filters['solidStranded'].dbKey === '0'}
            >
            Solid
          </Radio>
          <Radio
            value='1'
            id='Stranded'
            checked = {filters['solidStranded'].dbKey === '1'}
            >
            Stranded
          </Radio>
          <Radio
            value=''
            id='none'
            checked = {filters['solidStranded'].dbKey === null}
          >
            None
          </Radio>
        </RadioGroup>
      </div>
          <div>
            <button onClick = {handleClearFilters} >
              Clear Filters
            </button>
          </div>
    </Fragment>:null)
  );
};
export default App;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
116
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте value в RadioGroup вместо атрибута checked, значение не должно быть нулевым.

import React, { useState, Fragment } from "react";
import { Radio } from "antd";

const RadioGroup = Radio.Group;

const App = () => {
  const initFilters = {
    wireSizeId: { displayValue: "", type: "num", dbKey: "" },
    colorId: { displayValue: "", type: "num", dbKey: "" },
    insulationId: { displayValue: "", type: "num", dbKey: "" },
    wireTypeId: { displayValue: "", type: "num", dbKey: "" },
    solidStranded: { displayValue: "", type: "num", dbKey: "-1" }, // change
    copperAlum: { displayValue: "", type: "num", dbKey: null }
  };
  const [filters, setFilters] = useState(initFilters);

  const handleClearFilters = () => {
    setFilters(initFilters);
  };

  const handleCheckbox = (props) => {
    setFilters({
      ...filters,
      solidStranded: {
        // change
        displayValue: props.target.id,
        type: "num",
        dbKey: props.target.value
      }
    });
  };
  // the ternary operator isn't necessary now.
  return filters ? (
    <Fragment>
      <div>
        <RadioGroup
          name = "solidStranded"
          onChange = {handleCheckbox}
          value = {filters["solidStranded"].dbKey} // change
        >
          <Radio value = "0" id = "Solid">
            Solid
          </Radio>
          <Radio value = "1" id = "Stranded">
            Stranded
          </Radio>
          <Radio value = "-1" id = "none">
            None
          </Radio>
        </RadioGroup>
      </div>

      <div>
        <button onClick = {handleClearFilters}>Clear Filters</button>
      </div>
    </Fragment>
  ) : null;
};

export default App;

https://codesandbox.io/s/chekbox-example-8vh07?file=/src/App.js

Большое вам спасибо, особенно за все ваши усилия по размещению исправленного кода на codeandbox. Ты спас меня от сумасшествия.

user2443507 19.12.2020 17:23

Другие вопросы по теме