React中使用onClick事件处理程序。

Question

我是一名 React 的新手，希望从基础开始学习这个框架。我已经构建了一些简单的组件（用于典型餐厅网站），但我在理解事件处理方面遇到了问题。基本上，我有一个应用程序组件，它只调用 Main 组件，而 Main 组件又调用 Menu 和 Dishdetail 组件。因此，层次结构是 App --> Main --> (Menu 和 Dishdetail)。

App（仅调用 Main）

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

主要内容（通过属性调用菜单组件）: 在这里，我使用了 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 组件再使用两个 props 调用 menu 组件。在这里，我使用箭头函数作为 onClick 事件的响应，以设置组件的状态（因此我知道选择了哪道菜）。但我同时将其传递为 props 吗？还是不是？

2. 执行流程进入 menu 组件后，它会使用 'loop' 中选定的菜肴和收到的相同 prop onClick 调用 RenderMenuItem。这里发生了什么？它只是指示程序调用 Main 组件中的函数（就像在第1点中再次更改状态）吗？

3. 在 RenderMenuItem 组件中，我不知道除了它调用一个名为 onClick 的函数并传递参数 dish.id 外，onClick 属性还有什么作用。有人能详细解释一下当您将像 onClick 这样的事件属性传递给子组件时实际发生了什么吗？

- Harsha Limaye

---

你同时涉及到许多新概念，其中两个主要的概念是Reactjs和Vanilla Javascript ES6标准。学习如何使用React需要掌握VJS-ES6。我个人发现这个视频教程系列非常好地逐步解释了Reactjs https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3 - Ricardo Sanchez

Answer 1

在你的代码中，onClick既是事件处理程序又是属性。不要将onClick用作属性。

1. 是的，onClick()也像其他属性一样传递给子组件。
2. 你再次将Menu组件接收到的onClick作为prop传递给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'));

但是在这种状态下，您无法将实际的属性传递给该函数，因此必须将其包装在箭头函数中，这正是您在RenderMenuItem组件中所做的。

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

如果您只是想将函数传递给子组件，请使用除 onClick 之外的其他 prop 名称。

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>
    )
});

注意：不要在渲染中使用箭头函数，这会在每次渲染时创建新的函数。将函数与类控制器绑定并在渲染中使用它。

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>
    );
  }
}

- Karthick B