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

Question

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

应用程序（只需调用 Main）

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

Main（调用Menu组件用props）这里我用的是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 组件，而 Main 组件又使用 2 个属性调用 menu 组件。这里我使用箭头函数作为对 onClick 事件的响应来设置组件的状态。（所以我知道选择了哪道菜）。但我也将它作为道具传递？或者我不是？
一旦执行流入 Menu 组件，它就会调用 RenderMenuItem，其中包含在地图 'loop' 中选择的菜品以及收到的 onClick 道具。这里发生了什么？它只是指示程序调用Main组件中的函数（只是像第1点那样再次改变状态）？
在 RenderMenuItem 组件中，我不知道 onClick 属性发生了什么，除了它正在调用一个带有参数 dish.id 的名为 onClick 的函数。有人可以详细解释当您将 onClick 之类的事件属性传递给子组件时到底发生了什么吗？

Answer 1

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

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

但是您不能在此状态下将实际的 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>
    )
});

P.s。不要在渲染中使用箭头函数，它会在每次渲染时创建新函数。将函数与 class 控制器绑定并在渲染中使用它。

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

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

Use of onClick event handler in React

javascript

dom-events

reactjs

react-props