如何將事件從父級傳遞給子級以與功能組件發生反應？

Question

我的父組件中有兩個按鈕 AddRow 和 DeleteRow 按鈕，如果我單擊 addRow 按鈕，它將在網格中添加一個空行，如果我單擊 deleteRow 按鈕，它將從網格中刪除選定的行。 我在我的子組件中添加了兩個函數，用於向網格添加行和從網格中刪除記錄。 如何從父組件按鈕點擊事件中調用這些函數。 下面給出了類似的示例代碼。

我已經使用提升 state 到父組件它正在工作是任何其他方式來做到這一點，因為我需要將整個子組件代碼移動到父組件並且有 4 個子組件將所有子代碼提升到父級成為父級中的巨大代碼組件在這種情況下做事的反應方式是什么。

import { render } from 'react-dom';
import React, { useState } from 'react';

const App = () => {
  return (
    <Parent />
  );
};

const Parent = () =>{ 
  return (
  <div>
    <h1>Parent Component</h1>
    <div id="newElements"></div>
    <input type="button" value="Add New Element" onClick={} />
    <input type="button" value="Clear Elements" onClick={} />  
  <Child />
  </div>
)

};

const Child = () =>{ 
   function addElement()
  {
    //this function will add row to grid.
    var node = document.createElement("h1");  
    node.innerHTML="New Element";
    document.getElementById('newElements').appendChild(node); 
  }
  function clearElement()
  {
    //this function will remove row from grid
    document.getElementById('newElements').innerHTML=""; 
  }
  return (
  <div>
    <h1>Child Component</h1>
    //here the grid will be there in my actual code 
    <div id="newElements"></div>
  </div>)
};
render(<App />, document.getElementById('root'));

單擊父組件 AddNewElement 按鈕時，我需要調用 addElement() function。

Answer 1

你應該提高自己的狀態 。 將functions和state移到父級，然后通過props傳遞給父級。 記住，React是關於數據流向組件樹的，而不是流向樹的。

import { render } from 'react-dom';
import React, { useState } from 'react';

const App = () => {
  return (
    <Parent />
  );
};

const Parent = () =>{ 
    const addElement = () =>
    {
      //this function will add row to grid.
      var node = document.createElement("h1");  
      node.innerHTML="New Element";
      document.getElementById('newElements').appendChild(node); 
    }
    const clearElement = () =>
    {
      //this function will remove row from grid
      document.getElementById('newElements').innerHTML=""; 
    }
  return (
  <div>
    <h1>Parent Component</h1>
    <div id="newElements"></div>
    <input type="button" value="Add New Element" onClick={} />
    <input type="button" value="Clear Elements" onClick={} />  
     <Child add={addElement} clear={clearElement}/>
  </div>
)

};

const Child = ({add, clear}) =>{ 

  return (
  <div>
    <h1>Child Component</h1>
    <button onClick={add}>Add</button>
    <button onClick={clear}>Clear</button>
    <div id="newElements"></div>
  </div>)
};
render(<App />, document.getElementById('root'));

Answer 2

如果我要說什么是反應方式來做到這一點，它會是這樣的：

父組件：

export default function App() {
  const [rows, setRows] = React.useState([]);

  const addElement = () => {
    setRows([...rows, "New Element"]);
  };

  const clearElement = () => {
    setRows((prevState) => {
      const arr = [...prevState];
      arr.splice(-1);
      return arr;
    });
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <input type="button" value="Add New Element" onClick={addElement} />
      <input type="button" value="Clear Element" onClick={clearElement} />
      <Child rows={rows} />
    </div>
  );
}

子組件：

const Child = (props) => {
  return (
    <div>
      <h1>Child Component</h1>
      {props.rows.map((row, index) => {
        return <h1 key={index}>{row}</h1>;
      })}
    </div>
  );
};

使用 react 的要點之一是將動態渲染跳過到應用程序中的任意點（如id="uniqueIdHere" ），無論您是使用 jQuery 還是新的 JS 語法來定位它然后改變 JS。 如果 React 使用得當，它將確保只重新渲染變化的節點（影子 DOM）並適當地跟蹤狀態（在任何時間點應該有多少節點）。

正如您所看到的渲染新節點或刪除它們的邏輯，當以某種方式使用 React 時，它並沒有那么大和可怕。

這是一個可以玩的沙箱，很高興回答您對我編寫的代碼的任何問題。