Javascript onClick不工作。我要发送'；cid&x27；取决于结果按钮

我正试图根据单击的按钮将“courseid”发送到本地存储，但onclick不起作用。是否有方法根据单击的按钮接收与onclick函数相关的“courseid”

 handleClick(e) {
        let courseid = e;
        alert(courseid);
        localStorage.setItem("course", JSON.stringify(courseid));
     }

render() {
    return (
        <div>
            <div style={{marginTop: '6%', marginBottom: '25%'}}>
                <table className="table table-striped">
                    <thead>
                    <tr>


                    </tr>
                    </thead>
                    <tbody>

                    {
                        this.state.data.map(function (course) {
                            return <tr>
                                <td key={course.id}>{course.cid}</td>
                                <td key={course.id}><Button type="button" style={{width: '75%'}}
                                                            onClick={this.handleClick(course.cid)}>View
                                    Course</Button></td>
                            </tr>;
                        }.bind(this))
                    }


                    </tbody>
                </table>
            </div>
        </div>
    );
}

handleClick（e）{
让courseid=e；
警报（courseid）；
setItem（“course”，JSON.stringify（courseid））；
}
render（）{
返回(
{
this.state.data.map（函数（课程）{
返回
{course.cid}
看法
课程
;
}.绑定（本）
}
);
}

您没有将

this.handleClick

作为对函数的引用传递，而是实际调用了它。从而传递此函数的返回值（在本例中为

未定义的
）

您可以用另一个函数包装它，并在该函数体内调用您的处理程序：

onClick={(e) => this.handleClick(course.cid)}

请注意，通过这种方式，它将为每个渲染周期创建一个新的函数引用，可能会或可能不会创建性能命中