在 React 中使用 onClick 事件處理程序

Question

我是 React 的新手，並試圖從頭開始學習該框架。 我已經構建了一些簡單的組件（用於典型的餐廳網站），但是我在理解事件處理方面遇到了問題。 基本上，我有一個 app 組件，它只調用 Main 組件，而 Main 組件又調用 Menu 和 Dishdetail 組件。 所以層次結構是 App --> Main --> (Menu and Dishdetail)。

應用程序（只需調用 Main）

return (
  <div>
    **<Main/>**
  </div>
);

Main (Calling Menu component with props) 這里我使用了 onClick 事件。

  **<Menu dishes={this.state.dishes}
                onClick={(dishId) => this.onDishSelect(dishId)} />**

菜單（使用 onClick 事件使用 RenderMenuItem 功能組件呈現某些內容）

const menu = props.dishes.map((dish) => {
    return (
        <div key={dish.id} className="col-12 col-md-5 mt-5 m-1">
            **<RenderMenuItem dish={dish} onClick={props.onClick} />**
        </div>
    )
});

RenderMenuItem 功能組件：

function RenderMenuItem({ dish, **onClick** }) {
return (
    **<Card onClick={() => onClick(dish.id)}>**
        <CardImg width='100%' src={dish.image} alt={dish.name} />
        <CardImgOverlay>
            <CardTitle>{dish.name}</CardTitle>
        </CardImgOverlay>
    </Card>
)}

一切正常，但我在理解事件處理程序時遇到問題，而且我也是箭頭函數的新手。 根據我的理解：

1. App 調用 Main 組件，而 Main 組件又調用帶有 2 個 props 的菜單組件。 這里我使用箭頭函數作為對 onClick 事件的響應來設置組件的狀態。 （所以我知道選擇了哪道菜）。 但我也將它作為道具傳遞？ 或者我不是？

2. 一旦執行流入 Menu 組件，它就會調用 RenderMenuItem，其中包含在地圖“循環”中選擇的盤子以及它收到的 onClick 相同的道具。 這里發生了什么？ 它是否只是指示程序調用 Main 組件中的函數（只需像第 1 點那樣再次更改狀態）？

3. 在 RenderMenuItem 組件中，我不知道 onClick 屬性發生了什么，除了它正在調用帶有參數 disc.id 的 onClick 函數。 有人可以詳細解釋將 onClick 之類的事件屬性傳遞給子組件時到底發生了什么嗎？

Answer 1

在您的代碼中， onClick 既是事件處理程序又是道具。 不要使用 onClick 作為道具。

1. 是的 onClick() 也像任何其他道具一樣傳遞給子組件。

2. 您再次將在 Menu 組件中收到的 onClick 作為道具傳遞給 RenderMenuItem 組件。 當 Menu 組件被點擊時，props.onClick 函數將被點擊事件調用。 檢查以下示例代碼

function Welcome(props) {
  return <h1 onClick={props.onClick}>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" onClick={(id)=>{ console.log(id) }}/>;
ReactDOM.render(element, document.getElementById('root'));

但是在這種狀態下您不能將實際的 prop 傳遞給該函數，因為您必須將其包裝在箭頭函數中，這正是您在 RenderMenuItem 組件中所做的。

function Welcome(props) {
  return <h1 onClick={() => {props.onClick(12)}>Hello, {props.name}</h1>;
}

如果您只想將函數傳遞給子組件，請使用 onClick 以外的其他道具名稱。

const menu = props.dishes.map((dish) => {
    return (
        <div key={dish.id} className="col-12 col-md-5 mt-5 m-1">
            **<RenderMenuItem dish={dish} clickHandler={props.onClick} />**
        </div>
    )
});

Ps 不要在渲染中使用箭頭函數，它會在每次渲染時創建新函數。 將函數與類控制器綁定並在渲染中使用它。

class Example extends Component {
  constructor(props, context) {
    super(props, context);
    this.clickHandler = this.clickHandler.bind(this); 
  }
  clickHandler(id) { // Use curried function if you need event clickHandler = (id) => (event) => {} 
 // do something
  }
  render() {
    return (
        <div onClick={this.clickHandler(2)}></div>
    );
  }
}