Reactjs React onClick不起作用，尽管与此绑定…不重复

我的代码有什么问题..为什么onclick事件handleClick不起作用

它没有显示任何控制台日志..我正在单击整个元素

class App extends Component {
    constructor(props) {
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
         console.log("this Is clicked");
      };

  render(){      
        return (
          <Singleimage onClick={this.handleClick} publicId= {this.props.publicId}>          
         </Singleimage>
      );
  }
}

如果您想查看SingleImage组件

import React  , { Component }  from 'react';
import PropTypes from 'prop-types';

import {CloudinaryContext, Transformation , Image} from 'cloudinary-react';

class Singleimage extends Component {
    render(){      
          return (
            <div>
            <h1>  cloudinary  ,  {this.props.publicId}</h1>

            <CloudinaryContext  cloudName="demo">
                <Image publicId= {this.props.publicId}>
                    <Transformation width="200" crop="scale" angle="10"/>
                </Image>
            </CloudinaryContext>
        </div>
        );
    }
}


Singleimage.propTypes = {
    publicId: PropTypes.string,
  };

  export default Singleimage;

---

不要在Singleimage上使用onClick，而是使用自定义道具handleClickProps

---

希望这对你有所帮助。

试着像我这样返回你的Singleimage组件。。但仍然无法工作：'你能提供Singleimage的代码以获得更清晰的信息吗。。。让我更新这个问题。但我认为，因为我没有将onclick传递给子组件。这应该没关系，onclick事件在CloudinaryContext上。例如，尝试在图像上放置onlick事件。这有效吗？抱歉，这很难奏效尝试一下，将onClick放在包装div上，而不是放在Singleimage Component中的CloudInArcContext上。是的……最终有效：意味着……onClick可以在本机html元素上工作，如div、p&span等……而不是在customwhy上……这个问题甚至被标记为重复……从中可以学到一两件事：

class App extends Component {
    constructor(props) {
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
         console.log("this Is clicked");
      };

  render(){      
        return (
          <Singleimage handleClickProps={this.handleClick} publicId= {this.props.publicId} />
      );
  }
}

class Singleimage extends Component {

    clickHandler(event){
        this.props.handleClickProps(event.target)
    }

    render(){      
          return (
            <div onClick={this.clickHandler.bind(this)}  >
            <h1>  cloudinary  ,  {this.props.publicId}</h1>

            <CloudinaryContext cloudName="demo">
                <Image publicId= {this.props.publicId}>
                    <Transformation width="200" crop="scale" angle="10"/>
                </Image>
            </CloudinaryContext>
        </div>
        );
    }
}