Question

我是React的新手，并试图从头开始学习框架。我已经构建了一些简单的组件（用于典型的餐馆网站），但是在理解事件处理时遇到了问题。基本上，我有一个仅调用Main组件的应用程序组件，而Main组件又调用了Menu和Dishdetail组件。因此，层次结构为App-> Main->（菜单和Dishdetail）。

应用程序（只需致电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>
)}

一切正常，但我在理解事件处理程序时遇到问题，并且我对箭头函数还是陌生的。据我了解：

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

Answer 1

在您的代码中，onClick既是事件处理程序又是属性。请勿将onClick用作道具。

是的，onClick（）也像其他道具一样传递给子组件。
您再次将在Menu组件中收到的onClick作为道具传递给RenderMenuItem组件。单击Menu组件时，将使用click事件调用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传递给该函数，因为您必须将其包装在arrow函数中，这正是您在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>
    )
});

P.s。不要在渲染中使用箭头功能，它将在每个渲染上创建新功能。将函数与类控制器绑定并在render中使用它。

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事件处理程序

1 个答案: