反応中の子要素から親要素への移動引数

コードを簡単に理解するために、親コンポーネントから子要素へデータを渡すときに実装された一方向性データフローを、「一方向データ結合」とも呼びます.
しかし、しばしば、子から親に何らかのデータを渡す必要があります.たとえば、フォームの場合、ユーザーの入力が親コンポーネントに影響を及ぼすときです.
新人が時々反応するために、子供からデータを送り返す方法のパターンを把握するのは難しいです.この記事では簡単な方法を説明します.

ユースケース
親要素を持っていることを想像しましょう.各子要素にはボタンがあり、ユーザーがそれを押すたびに、親がボタンの色を選択する必要があります.

function Parent() {
  return (
    <>
      <h1>Selected color: </h1> // show selected color
      {['green','red','blue'].map((color) => (
        <Child color={color} ... />
      ))}
    </>
  )
}

function Child({ color }) {
  return (
    <button value={color}>{color} button</button>
  )
}

上から下への引数を渡すことは小道具を介して簡単ですが、データを送信するにはトリッキーかもしれません.

コールバック
下から上までエンジニアをリバースしましょう
ボタンをクリックしてイベントをキャプチャするには

function Child({ color }) {
  function handleClick(event) {
    // do something meaningful
  }
  return (
    <button name={color} onClick={handleClick}>{color}</button>
  )
}

ハンドラ内の

は他の関数をコールする完全な場所です.我々はまだ作成したり、それを渡さなかったことに注意してください.コールバックはどんな引数も受け取ることができます、そして、親コンポーネントはそれらにアクセスするでしょう.この場合、ボタンから引数onChildClickを渡します.

function Child({ color,  onChildClick }) {
  function handleClick(event) {
    onChildClick(event.target.name); // pass any argument to the callback
  }
  return (
    <button name={color} onClick={handleClick}>{color}</button>
  )
}

最後のステップは、コールバックから引数を読んで、後で使用するために親コンポーネント状態に保存することです.

はコールバック機能nameを作成し、プロップhandleChildClickを通して子要素に渡す.

フックを加えて、状態変数onChildClickと機能useStateを割り当てて、それを更新します.

は、子コンポーネントから渡されたcolor関数から引数を読み、setColor関数を呼び出して新しい値で状態を更新します.

function Parent() {
  const [color, setColor] = useState('');
  function handleChildClick(color) {
    setColor(color);
  }
  return (
    <>
      <h1>selected color: {color}</h1>
      {['green','red','blue'].map((color) => (
        <Child color={color} onChildClick={handleChildClick} ... />
      ))}
    </>
  )
}

すべてのボタンをクリックすると、イベントハンドラーを呼び出します.内部では、handleChildClickからコールバック関数を呼び出し、この関数を呼び出し元のコンポーネントに設定します.

あなたが闘うかもしれないところ

イベントから直接コールバックを呼び出し、引数を渡す.それはすべてのレンダリングされたボタン要素のために即座に機能を起動し、機能しません.

<button onClick={onChildClick(color)} ... />

イベントハンドラーに渡す引数は、すべてのレンダリングされたボタン要素に対して即座に関数を呼び出します.

<button onClick={handleClick(color)} ... />

インラインアロー関数とコールバックを使ってコールバックするたびに新しい矢印関数を作成します.可能ですが効率的ではありません.

<button onClick={(event) => onChildClick(color, event)} ... />

クラスのコンポーネントとメソッドをイベントハンドラーとして使用する場合は、コンテキストをバインドすることを忘れないでください.setColorのすべての更なる議論で、propsのように、進められます.

<button onClick={this.handleClick.bind(this, color)} .../>

総括
子供から親への引数を渡すことは混乱しているわけではありません.この記事が混乱の一部をクリアすることを願っています.