javascript - onClick 不工作。我想发送 'cid' 取决于结果按钮

Question

我正在尝试根据单击的按钮将“courseid”发送到本地存储，但 onclick 不起作用。有没有一种方法可以根据单击的按钮将相关的“courseid”接收到 onclick 函数。

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

Answer 1

您没有将 this.handleClick 作为对函数的引用传递，但实际上调用了它。从而传递此函数的返回值(在本例中为 undefined)。

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

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

请注意，通过这种方式，它会为每个渲染周期创建一个新的函数引用，并且可能或可能不会造成性能损失。