【TypeScript】Reactでラジオボタンを実装してみるよ！

投稿者 投稿日:


1. ラジオボタンコンポーネントの作成

srcフォルダ内にRadioButton.tsxというファイルを作成し、ラジオボタンのコンポーネントを実装します

// src/RadioButton.tsx
import React from 'react';
import './RadioButton.css';

type RadioButtonProps = {
  label: string;
  value: string;
  checked: boolean;
  onChange: (value: string) => void;
};

const RadioButton: React.FC<RadioButtonProps> = ({ label, value, checked, onChange }) => {
  return (
    <label className="radio-button">
      <input
        type="radio"
        value={value}
        checked={checked}
        onChange={() => onChange(value)}
        className="radio-button__input"
      />
      <span className="radio-button__label">{label}</span>
    </label>
  );
};

export default RadioButton;

2. スタイリングの追加

ラジオボタンに簡単なスタイリングを追加するため、srcフォルダにRadioButton.cssというファイルを作成します

/* src/RadioButton.css */
.radio-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-button__input {
  display: none;
}

.radio-button__label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
}

.radio-button__label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #007BFF;
  border-radius: 50%;
  background-color: #fff;
}

.radio-button__input:checked + .radio-button__label::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #007BFF;
}

3. ラジオボタングループの作成

App.tsxでラジオボタングループを作成し、各ラジオボタンの状態管理を行います

// src/App.tsx
import React, { useState } from 'react';
import RadioButton from './RadioButton';
import './App.css';

const App: React.FC = () => {
  const [selectedValue, setSelectedValue] = useState<string>('option1');

  const handleRadioChange = (value: string) => {
    setSelectedValue(value);
  };

  return (
    <div className="App">
      <h1>Choose an option</h1>
      <RadioButton
        label="Option 1"
        value="option1"
        checked={selectedValue === 'option1'}
        onChange={handleRadioChange}
      />
      <RadioButton
        label="Option 2"
        value="option2"
        checked={selectedValue === 'option2'}
        onChange={handleRadioChange}
      />
      <RadioButton
        label="Option 3"
        value="option3"
        checked={selectedValue === 'option3'}
        onChange={handleRadioChange}
      />
    </div>
  );
};

export default App;

4. アプリケーションのスタイリング

必要に応じて、src/App.cssでアプリケーション全体のスタイリングを追加します

/* src/App.css */
.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

ぜひ、ご参考ください

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon