Javascript 在组件上进行手动单击

我是一个完全的反应新手。我创建了一个组件，它是一个按钮。该组件渲染出一个图像，我的目标是将该图像用作收藏夹按钮。现在我想做的就是在我点击图片时在我的控制台中记录一些东西

我使用了handleClick事件，但我认为这并不是那么简单，这是我的组件：

/**
 * Renders the Favorite button
 */
export default class FavoriteButton extends React.Component
{
    /**
     * Favorite button constructor
     *
     * @param props
     */
    constructor(props)
    {
        super(props);

        this.state = {
            header: "some header test data",
        }
    }

    /**
     * Handle a click event on a Favorite button
     */
    handleClick()
    {
        console.log("hello there");
    }

    /**
     * Renders the Favorite button
     */
    render()
    {
        return(
            <div className="favorite_button">
                <img src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }
}

/**
*渲染收藏夹按钮
*/
导出默认类FavoriteButton扩展React.Component
{
/**
*收藏夹按钮构造函数
*
*@param道具
*/
建造师（道具）
{
超级（道具）；
此.state={
标题：“一些标题测试数据”，
}
}
/**
*处理收藏夹按钮上的单击事件
*/
handleClick（）
{
log（“你好”）；
}
/**
*渲染收藏夹按钮
*/
render（）
{
返回(
{this.state.header}
);
}
}

如果有人能帮我，那真是太棒了

我的最终目标是启动一个数据库操作来存储您喜欢的元素，但现在我只想记录一些东西：）

非常感谢

试试这个：）

{this.state.header}

试试这个：）

{this.state.header}

您已将方法

handleClick

添加到组件，但您必须将其分配给一个，在本例中为

onClick

render()
{
    return(
        <div className="favorite_button">
            <img onClick={this.handleClick} src="url" className="" alt="" />
            <div>{this.state.header}</div>
        </div>
    );
}

---

您已将方法

handleClick

添加到组件中，但必须将其分配给一个，在本例中为

onClick

render()
{
    return(
        <div className="favorite_button">
            <img onClick={this.handleClick} src="url" className="" alt="" />
            <div>{this.state.header}</div>
        </div>
    );
}

render（）
{
返回(
{this.state.header}
);
}

或者，如果您想在多个具有不同功能的组件中使用此按钮，则必须执行以下操作：

 render()
    {
        return(
            <div className="favorite_button">
                <img onClick={this.props.handleClick} src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }

render（）
{
返回(
{this.state.header}
);
}

在父组件中：

    class Parent extends Component {

            test (){
                 console.log("hiiii its parent component");
               }

            render(){
                return(
                   <FavoriteButton handleClick={()=>{this.test()}}/>
                 );
            }

}

类父级扩展组件{
测试（）{
log（“hiiii及其父组件”）；
}
render（）{
返回(
{this.test（）}}/>
);
}
}

render（）
{
返回(
{this.state.header}
);
}

或者，如果您想在多个具有不同功能的组件中使用此按钮，则必须执行以下操作：

 render()
    {
        return(
            <div className="favorite_button">
                <img onClick={this.props.handleClick} src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }

render（）
{
返回(
{this.state.header}
);
}

在父组件中：

    class Parent extends Component {

            test (){
                 console.log("hiiii its parent component");
               }

            render(){
                return(
                   <FavoriteButton handleClick={()=>{this.test()}}/>
                 );
            }

}

类父级扩展组件{
测试（）{
log（“hiiii及其父组件”）；
}
render（）{
返回(
{this.test（）}}/>
);
}
}

在渲染中使用Function.prototype.bind会在每次组件渲染时创建一个新函数，这可能会影响性能（见下文）。在渲染中使用Function.prototype.bind会在每次组件渲染时创建一个新函数，这可能会影响性能（见下文）。