Question

我是反应家的新手，并使用点击处理程序在我的网页中显示/隐藏某些div。按钮的onClick方法不会调用所需的函数。这是代码片段。

    showPartsInfo: function(e){
        console.log(e+" here in parts ");
        this.setState({showInfo:!this.state.showInfo});
}

return <div>
                <h3>Search Parts:</h3>
                <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
                {
                    libraries.map(function(l){
                    return([
                        <div className="container">
                        <div className="row">
                            <div className="col-sm-6">
                                     <button type="button" onClick={this.showPartsInfo}>{l.name}</button>
                                     { showInfo ? <Results /> : null }
                            </div>
                            <div className="col-sm-6">
                                <a className="button btn2 cur">Move</a>
                            </div>
                        </div>
                        </div>
                        ]);
                    })
                }
                </div>
}

我可以在调用onChange时记录，但是在调用onClick时无法记录。

Answer 1

在.map函数中，您正在创建一个函数，因此您正在执行该函数范围内的所有代码。因此，this.showPartsInfo不存在，因为this指向函数本身。

您必须使用.bind()将该函数绑定到组件上下文：

                libraries.map(function(l){
                return([
                    <div className="container">
                    <div className="row">
                        <div className="col-sm-6">
                                 <button type="button" onClick={this.showPartsInfo}>{l.name}</button>
                                 { showInfo ? <Results /> : null }
                        </div>
                        <div className="col-sm-6">
                            <a className="button btn2 cur">Move</a>
                        </div>
                    </div>
                    </div>
                    ]);
                }.bind(this))

（注意最后一行）。有关此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

的更多信息

您也可以将范围作为第二个参数传递，因此不要使用bind，而是执行此操作：

libraries.map(function(l){...}, this);

Answer 2

你也可以使用这样的箭头功能：

libraries.map((l) => {
            return([
            ...

使用箭头函数，函数内部this的值由箭头函数的定义位置确定。

此处有更多信息：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Description

onClick函数不会在reactjs

2 个答案: