React handleClick 组件

Question

我是 React 的新手。我创建了一个按钮组件。这个组件渲染出一个图像，我的目标是使用这个图像作为收藏按钮。现在我想做的就是在单击图像时在我的控制台中记录一些内容。

我使用了 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>
        );
    }
}

如果有人能帮助我，那就太棒了！

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

提前谢谢了！

原文由 Frank Lucas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

或者如果你想在几个具有不同功能的组件中使用这个按钮，你必须这样做：

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

在父组件中：

     class Parent extends Component {

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

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

}

原文由 user5738822 发布，翻译遵循 CC BY-SA 3.0 许可协议