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>
        );
    }
}

如果有人可以帮助我，那真是太棒了！

我的最终目标是触发数据库操作来存储您喜欢的元素但是现在我只想记录一些内容：）

非常感谢提前！

Answer 1

您已将方法handleClick添加到组件，但您必须将其分配给event handler，在本例中为onClick。

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

如果要在this内使用handleClick，则必须将方法绑定到实例。

constructor(props)
{
    super(props);
    this.state = {
        header: "some header test data",
    }
    this.handleClick = this.handleClick.bind(this);
}

Answer 2

 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()}}/>
                 );
            }

}

Answer 3

试试这个:)

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

React handle点击组件

3 个答案: