Радиокомпонент ReactJS UI Ant Design

Опубликовано: 8 Августа, 2022

В Ant Design Library этот компонент уже собран, и его также очень легко интегрировать . Radio Component позволяет пользователю выбрать один вариант из набора. Мы можем использовать следующий подход в ReactJS для использования радиокомпонента Ant Design.

Методы радио:

  • blur(): этот метод используется для удаления фокуса с элемента.
  • focus(): этот метод используется для получения фокуса на элементе.

Радиореквизит:

  • autoFocus: используется для получения фокуса при монтировании компонента.
  • проверено: указывает, выбрано ли радио или нет.
  • defaultChecked: используется для указания начального состояния того, выбрано ли радио или нет.
  • disabled: Используется для отключения радио.
  • значение: используется для обозначения значения для выбранного переключателя.

Реквизит RadioGroup:

  • buttonStyle: используется для обозначения типа стиля переключателя.
  • defaultValue: используется для определения выбранного значения по умолчанию для переключателя.
  • disabled: используется для отключения всех переключателей.
  • name: используется для определения свойства name всех входных дочерних элементов, которые имеют тип radio .
  • options: используется для установки дочерних опций.
  • optionType: используется для указания типа опции для радио.
  • размер: используется для обозначения размера радио.
  • значение: используется для установки текущего выбранного значения.
  • onChange: это функция обратного вызова, которая срабатывает при изменении состояния.

Создание приложения React и установка модуля:

  • Шаг 1: Создайте приложение React с помощью следующей команды:

     npx имя папки create-реагировать-приложение

  • Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

     cd имя папки

  • Шаг 3: После создания приложения ReactJS установите требуется модуль с помощью следующей команды:

     нпм установить и

Структура проекта: Это будет выглядеть следующим образом.

Пример. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

App.js




import React, { useState } from "react"
import "antd/dist/antd.css";
import { Radio } from "antd";
  
export default function App() {
  
  const [currentValue, setCurrentValue] = useState("Goa")
  
  return (
    <div style={{ display: "block", width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Radio Component</h4>  
      <Radio.Group onChange={(e) => {
        setCurrentValue(e.target.value)
      }} value={currentValue}>
        <Radio value={"Goa"}>Goa</Radio>
        <Radio value={"MP"}>MP</Radio>
        <Radio value={"Delhi"}>Delhi</Radio>
        <Radio value={"UP"}>UP</Radio>
      </Radio.Group> <br />
      Current Selected Option: {currentValue}
    </div>
  );
}

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Ссылка: https://ant.design/components/radio/

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ