React の双方向データバインディングの実装方法

2年 ago
海斗, 葵
1 minute

React では、双方向データバインディングは次の2つの方法で実現できます。

  1. コントロールされたコンポーネントを使用します。制御されたコンポーネントとは、Reactコンポーネントのstateまたはpropsによって値が制御されるフォーム要素のことです。フォームの値に変更があったとき、イベント処理関数によってコンポーネントのstateまたはpropsが更新され、コンポーネントが再描画してフォームの値を更新します。

制御されたコンポーネントを使用した双方向データバインディングの実装方法を示す例を次に示します。

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>{inputValue}</p>
    </div>
  );
}

export default App;

上記のコードでは、input要素の値はinputValue状態変数でコントールされており、inputの値が変更されるとhandleChangeイベント処理関数が起動して、inputValueの値を更新して、双方向データバインディングを実現しています。

  1. react-redux
  2. 接続

React-reduxライブラリはconnectというメソッドを提供しており、ReactコンポーネントとReduxのstoreを関連付けることができます。connectメソッドを使用すると、状態をコンポーネントのpropsにマップするmapStateToProps関数を定義したり、dispatch関数をコンポーネントのpropsにマップするmapDispatchToProps関数を定義したりできます。

connect メソッドを用いることで双方向のデータバインディングが実現でき、コンポーネントの props の変更は Redux の state に同期し、 Redux の state の変更はコンポーネントの props に同期する。

以下は、react-reduxを使用している例です。

import React from 'react';
import { connect } from 'react-redux';

function App({ inputValue, updateInputValue }) {
  const handleChange = (event) => {
    updateInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>{inputValue}</p>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    updateInputValue: (value) => dispatch({ type: 'UPDATE_INPUT_VALUE', value })
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

上のコードでは、 connect メソッドを用いてコンポーネント App と Redux の store が接続されています。 mapStateToProps 関数は Redux の state 内の inputValue をコンポーネントの inputValue props にマッピングし、 mapDispatchToProps 関数は Redux の state を更新するために利用される updateInputValue 関数をコンポーネントの updateInputValue props にマッピングしています。

入力の値が変化するとhandleChangeイベントハンドラ関数が発動し、updateInputValue関数が呼び出され、Reduxのstateが更新され、この結果としてコンポーネントのinputValueプロップが更新され、双方向データバインディングが実現されます。

bannerAds