在 React 中使用 onClick 事件处理程序答案

【问题标题】：Use of onClick event handler in React在 React 中使用 onClick 事件处理程序
【发布时间】：2020-04-09 16:12:51
【问题描述】：

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

应用程序（只需调用 Main）

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

Main（使用道具调用菜单组件）这里我使用了onClick事件。

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

Menu（使用 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>
)}

一切正常，但我在理解事件处理程序时遇到问题，而且我也是箭头函数的新手。据我了解：

App 调用 Main 组件，该组件又调用具有 2 个 props 的菜单组件。这里我使用箭头函数作为对 onClick 事件的响应来设置组件的状态。（所以我知道选择了哪道菜）。但我也将它作为道具传递？还是我不是？
一旦执行流程进入 Menu 组件，它就会调用 RenderMenuItem，并在地图“循环”中选择菜肴，并使用它收到的相同道具 onClick。这里发生了什么？是否只是指示程序调用 Main 组件中的函数（只是再次更改状态，如第 1 点）？
在 RenderMenuItem 组件中，我不知道 onClick 属性发生了什么，除了它使用参数 disc.id 调用一个名为 onClick 的函数。有人可以详细解释一下当您将 onClick 之类的事件属性传递给子组件时究竟会发生什么？

【问题讨论】：

您同时处理许多新概念，您需要了解的两个主要概念是 Reactjs 和 Vanilla Javascript ES6 标准。学习如何使用 React 伴随着 VJS-ES6。我个人觉得这个视频教程系列非常擅长逐步解释 Reactjs youtube.com/…

标签： javascript reactjs dom-events react-props

【解决方案1】：

在您的代码中，onClick 既是事件处理程序又是道具。不要使用 onClick 作为道具。

是的，onClick() 也像任何其他道具一样被传递给子组件。
您再次将在 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>
    )
});

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

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

【讨论】：