React のラジオボタン

Irakli Tchigladze 2023年1月30日

React React Button

React のラジオボタン
カスタムラジオコンポーネント

JavaScript フレームワークで単純なフォームを作成したことがある開発者は、ラジオボタンに精通している必要があります。これらは、ユーザーが複数のオプションから選択できるようにするときに使用するデフォルトの <input/> タイプです。React でラジオボタンを実装するための 2つのアプローチを見てみましょう。

React のラジオボタン

JSX でのラジオボタンの基本的な実装は、HTML と非常によく似ています。例を見てみましょう：

<div>
     <input type="radio" name="theme" value="DARK"/>Dark
     <input type="radio" name="theme" value="LIGHT"/>Light
</div>

この JSX コードは、通常の HTML と簡単に間違えられる可能性があります。onChange イベント後の状態の更新など、より複雑な機能を導入すると、HTML と JSX の違いがより顕著になります。この例を見てみましょう：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    return <div onChange={(e) => this.setState({theme: e.target.value})}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
  }
}

このコードでは、ユーザーにはダークとライトの 2つのオプションがあります。それらのいずれかを選択するたびに、入力要素の value 属性の値をキャプチャし、状態の theme プロパティをそれに等しく設定します。より良いデモンストレーションについては、サンプルプレイコードアプリを参照します。

イベントハンドラーが中括弧のペアの間に配置されていることに注意してください。中括弧の間の式は JavaScript コードとして実行する必要があることを伝える必要があります。

開発者は、イベントハンドラーの選択に制限されません。ボタンを使用して選択を送信する場合は、ラジオボタンがフォーム onClick 内に配置されている場合は、onChange、onSubmit を使用できます。

`.map()`

オプションの配列がある場合は、.map() メソッドを使用してそれらすべてをレンダリングできます。たとえば、ユーザーが選択できるようにする色のリストがある場合は、次のことができます。

const arr = ["white", "black", "blue", "green"]
return (
        <div>
        {
            arr.map(color => 
                <input type="radio" name="colors" value={color} />
                   )  
                 }
        </div>
)

<div> 要素内の中括弧は、その中の式を JavaScript コードとして実行する必要があることを React に通知します。

コードが実行されると、4つの <input> 要素が作成され、それぞれが配列の value 属性を持ちます。

`defaultChecked`

デフォルトでラジオボタンをチェックするには、defaultChecked 属性を使用できます。上記の例で、デフォルトのダークテーマを設定したい場合、要素は次のようになります。

<input type="radio" name="theme" defaultChecked value="DARK"/>Dark

カスタムラジオコンポーネント

React アプリケーションを開発するときは、常にシンプルに保つようにしてください。また、ラジオボタン機能を頻繁に使用する場合は、カスタムラジオコンポーネントを作成することでコードの繰り返しを回避できます。

const Radio = ({handler, theme}) => {
  return <div style={{height: "500px", width: "500px", backgroundColor:                                 theme.toLowerCase() === "light" ? "white" : "black"}} 
                onChange={handler}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
}

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    const handleChange = (e) => this.setState({theme: e.target.value})
    return <div><Radio handler={handleChange} theme={this.state.theme}></Radio></div>
  }
}

上部に、Radio と呼ばれるステートレス関数コンポーネントを作成しました。イベントハンドラーを props として渡すことができるので、この子コンポーネントが状態を開始する本当の理由はありません。ダムコンポーネント（状態のないコンポーネント）も、テストと保守が簡単です。

著者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React のラジオボタン

.map()

defaultChecked

カスタムラジオコンポーネント

関連記事 - React Button

`.map()`

`defaultChecked`