简体   繁体   English

onClick() function 如何在 ReactJS 中工作 容器组件和展示组件中发生了什么

[英]How does the onClick() function works in ReactJS What is happening in Container Component and Presentational Component

"The Main class is the container component from where I am importing the Presentational component Menu" “主 class 是容器组件,我从中导入演示组件菜单”

"Regarding dishes.js, DishdetailComponent.js in Main class(where I am importing) these are just used for rendering purpose" “关于主类(我正在导入)中的菜.js,DishdetailComponent.js,这些仅用于渲染目的”

"I just want to know how the onClick() function is communicating with Menu class since there is an onClick()" “我只想知道 onClick() function 是如何与菜单 class 通信的,因为有一个 onClick()”

"What happens is that there is a list of items displayed on the screen where if an item is clicked the details of it is shown which is handled by another component.. I just want to know what is happening with the onClick() in Menu and the onClick() in Main are they working parallely? " “发生的情况是屏幕上显示了一个项目列表,如果单击一个项目,则会显示由另一个组件处理的项目的详细信息。我只想知道菜单中的 onClick() 发生了什么和 Main 中的 onClick() 是否并行工作?”

    import React, { Component } from 'react'; 
    import { Navbar,NavbarBrand } from 'reactstrap'; 
    import Menu from './MenuComponent';
    import DishDetail from './DishdetailComponent';
    import { DISHES } from '../shared/dishes';

    class Main extends Component {
      constructor(props){
        super(props);
        this.state = {
          dishes:DISHES,
          selectedDish:null 
        };
      }

      onDishSelect(dishId){
        this.setState({selectedDish:dishId});
    }

      render(){ 
        return (
          <div> {/* class name app has been removed */}
            <Navbar dark color="primary">
              <div className="container">
                <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
              </div>
            </Navbar> 
            <Menu dishes={this.state.dishes} onClick={(dishId)=> this.onDishSelect(dishId)}/>


            <DishDetail 
            dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish )[0]} />   
          </div>
        );
      } 

    }

    </script>




import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 'reactstrap';

class Menu extends Component { 

constructor(props){
        super(props); 
     }
render(){

    const menu=this.props.dishes.map( (dish) => {   
        return(
            <div key={dish.id} className="col-12 col-md-5 m-1">             
              <Card onClick={() => this.props.onClick(dish.id)}>  
                    <CardImg width="100%" src={dish.image} alt={dish.name}  />
                    <CardImgOverlay body className="ml-4"> 
                            <CardTitle>{dish.name}</CardTitle>
                    </CardImgOverlay>
              </Card>
            </div>
              );
    }) ; 

        return( 
            <div className="container">
                <div className="row"> 


                </div>

            </div>
            ); 
        }
        }
export default Menu;

onClick on Menu component rendered in Main component is not an even handler but a prop passed on to the Menu component. onClick在 Main 组件中呈现的 Menu 组件不是偶数处理程序,而是传递给 Menu 组件的道具。 For the sake of understand you can think of it like handleClick为了便于理解,您可以将其想象为handleClick

The onClick on Card inside Menu is again a prop passed on to the Card component.菜单内卡上的onClick再次是传递给卡组件的道具。 Since card ccomponent is used from reactstrap, it internally would be rendering a div wherein it would attach an actual onClick handler由于卡 ccomponent 是从 reactstrap 中使用的,因此它将在内部呈现一个 div,其中它将附加一个实际的onClick处理程序

Now when the Card is clicked, the handler inside Card is trigger which then calls the onClick passed on as props to it and it further calls this.props.onClick(dish.id) which is the function passed on from Menu component.现在,当卡片被点击时,卡片内的处理程序被触发,然后调用 onClick 作为道具传递给它,并进一步调用this.props.onClick(dish.id) ,这是从Menu组件传递的 function。

The onClicks functions are not executed parallelly but sequentially communication information from child to the parent and further to the grandparent. onClicks 函数不是并行执行的,而是按顺序将信息从子代传递到父代,然后再传递到祖代。

The problem is with your naming... It confuses you.问题在于你的命名......它让你感到困惑。 The onClick attribute on your Menu is a property passed to your react Menu component.菜单上的 onClick 属性是传递给反应菜单组件的属性。 The this.props.onClick receives the function defined in the onClick attribute. this.props.onClick 接收 onClick 属性中定义的 function。

In your menu, the onClick attribute is set on a HTML element so that defines a click handler.在您的菜单中,onClick 属性设置在 HTML 元素上,以便定义点击处理程序。 It happens that your click handler executes the function in this.props.onClick which has been passed from the parent.碰巧您的点击处理程序在 this.props.onClick 中执行 function ,它已从父级传递。

I suggest to change the property name to something more explicit, something like onDishSelection maybe?我建议将属性名称更改为更明确的名称,例如 onDishSelection 之类的名称?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM