React 父组件中的 onClick 事件不起作用

Posted 2023-02-22

【中文标题】React 父组件中的 onClick 事件不起作用

【英文标题】：onClick event in React parent component is not working

【发布时间】：2018-05-31 03:53:56

【问题描述】：

我创建了一个 react 父组件，它将一些道具向下传递给它的子组件，并拥有一个 onClick 函数。当单击产品组件时，onClick 函数应该 console.log 'WORKED'，这不起作用并且控制台上没有出现任何内容。我不明白我哪里出错了，这应该很简单。我犯了一个我一直想念的愚蠢错误吗？

这是我的父组件代码：

import React from 'react';
import  connect  from 'react-redux';
import Product from '../components/product.js';
import  bindActionCreators  from 'redux';
import  changeTotal  from '../actions/index.js';
import  selectProduct  from '../actions/index.js';

class ProductList extends React.Component 
    constructor(props) 
        super(props);

        this.state=
            total: 0
        

        this.addFromTotal = this.addFromTotal.bind(this);
        this.subtractFromTotal = this.subtractFromTotal.bind(this);
        this.handleClick = this.handleClick.bind(this);
    

    handleClick() 
        console.log('done')
    

    addFromTotal(product) 
        var x = Number(product.price)
        this.setState(total: this.state.total + x, () => 
            console.log('total is ' + this.state.total);
            var total = this.state.total;
            this.props.changeTotal(total);
        );
    

    subtractFromTotal(product) 
        var x = Number(product.price)
        this.setState(total: this.state.total - x, () => 
            console.log('total is ' + this.state.total);
            var total = this.state.total;
            this.props.changeTotal(total);
        );
    

    render() 
        var createProductList = this.props.products.map((product, i) => 
            return <Product
                    key=i 
                    title=product.title 
                    price=product.price 
                    definition=product.definition
                    source=product.source
                    addFromTotal=() => this.addFromTotal(product)
                    subtractFromTotal=() => this.subtractFromTotal(product)
                    // onClick=() => this.props.selectProduct(product)
                    onClick=this.handleClick
                    />
        );
        return (
            <div>
                <div>Product List</div>
                <div style=display: 'flex', flexDirection: 'row'>createProductList</div>
            </div>
        );
    


function mapStateToProps(state) 
    return 
        products : state.products
    


function mapDispatchToProps(dispatch) 
    return bindActionCreators( changeTotal: changeTotal , dispatch);



export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

这是 Product（子）组件的代码：

import React from 'react';
import  connect  from 'react-redux';
import  bindActionCreators  from 'redux';
import  updateItemObject  from '../actions/index.js'

class Product extends React.Component 
    constructor(props) 
        super(props);

        this.state = 
            counter: 0,
            itemTotal: 0
        

        this.handleAdd = this.handleAdd.bind(this);
        this.handleSubtract = this.handleSubtract.bind(this);
    

    handleAdd(product) 
        var x = Number(this.props.price)
        this.setState(
            itemTotal: this.state.itemTotal + x,
            counter: this.state.counter + 1
        , () => 
            console.log('item total ' + this.state.itemTotal);
            console.log('item count ' + this.state.counter);
            this.props.addFromTotal(product);
        );
    

    handleSubtract(product) 
        if(this.state.counter === 0) 
            return;
        

        var x = Number(this.props.price)
        this.setState(
            itemTotal: this.state.itemTotal - x,
            counter: this.state.counter - 1
        , () => 
            console.log('item total ' + this.state.itemTotal);
            console.log('item count ' + this.state.counter);
            this.props.subtractFromTotal(product);
        );
    

    render() 
        return (
            <div style=margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'>
               <div>product name: this.props.title</div>
               <div>product price: this.props.price</div>
               <div>product definition: this.props.definition</div>
               <div style=
                   backgroundImage: this.props.source,
                   backgroundSize: 'cover',
                   padding: '15px',
                   margin: '15px',
                   height: '200px',
                   width: '250px' 
               >
               </div>
               <div>
                   <span style=cursor: 'pointer' onClick=this.handleAdd>+ </span>
                   <span style=cursor: 'pointer' onClick=this.handleSubtract>-</span>
               </div>
               <div>
                   <div>xthis.state.counter this.props.title for a sum of this.state.itemTotal</div>
               </div>
            </div>
        );
    


function mapDispatchToProps(dispatch) 
   return bindActionCreators( updateItemObject: updateItemObject , dispatch);


export default connect(null, mapDispatchToProps)(Product);

【问题讨论】：

显示Product组件的代码。

this 不是您认为的引用，因为 Lamba 的词法绑定

好的，我添加了产品组件的代码！

您不会在子组件中的任何地方使用 this.props.onClick - 您是否希望它会像在 div 上放置 onClick 一样工作？因为它不会。

【参考方案1】：

您将 onClick 作为道具从父组件传递给子组件，但在子组件中我没有看到您在子组件中的某些点击事件上调用 props.onClick。

【参考方案2】：

您没有在该组件内使用传递给product 组件的onClick 属性。因此它没有被解雇。您必须将事件处理程序分配给product 组件中的某个元素，这将触发作为道具传递给它的方法，如下所示

// Product.js component
render() 
        return (
            <div onClick=this.props.onClick style=margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'>
      ....

【讨论】：

非常感谢，我没有意识到我必须将函数传递给子组件