Javascript onClick事件处理程序在加载时调用，而不是在单击时调用

我是个新手，在尝试触发一个设置为道具的函数时遇到了一个问题。以下是我的组件：

class SamplesInnerLrg extends Component {  
    playSampleAction(sample,sampleId) {
       console.log(sample);
    }
    render() {
         return <div className="samples-container-inner-styling">
   {

     this.props.loadAllInitSamples.map((sample) => {
        return (
                <div key={sample.id} className="sample-comp-lge">
                <div className="sample-comp-lge-head-wrap">
                    <div className="sample-comp-lge-audio" id={sample.id} ref={sample.id} onClick={this.playSampleAction(sample,sample.id)}>
                        <audio preload="auto" className="audioTag">
                              <source src={sample.soundSource} type="audio/wav" />
                        </audio>
                    </div>
                    <div className="sample-comp-lge-header">
                        <span className="sample-comp-lge-Name"><h1>{sample.sampleName}</h1></span>
                        <span className="sample-comp-lge-id"><h2><a href="#">{sample.sampleFamily}</a></h2></span>
                        <div className="sample-comp-lge-owner-cont">
                            <div className="sample-comp-lge-owner-inner">
                                <a href="">{sample.uploader}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="sample-comp-lge-bottom-wrap">
                    <div className="sample-comp-lge-tags-cont">
                        <div className="sample-comp-lge-tag">
                            <ul className="sample-tags-list">
                                {
                                    sample.tags.map((tag) => {
                                        return ( 

                                            <li key={tag}><a href="#">#{tag}</a></li>
                                        )
                                    })

                                }
                            </ul>
                        </div>
                    </div>
                </div>

                </div>
            )
        })
   }
   </div>
    }
}

类samplesinnerlg扩展组件{
playSampleAction（样本，样本ID）{
控制台日志（示例）；
}
render（）{
返回
{
this.props.loadAllInitSamples.map（（示例）=>{
返回(

{
sample.tags.map（（tag）=>{
报税表（

)
})
}

)
})
}
}
}

---

我试图触发的事件是

playSampleAction

。事件似乎在我加载页面时触发，但在我单击时不会触发。我试着在

onClick

的末尾添加

.bind（this）

，但sill没有执行单击操作。值得注意的是，单击时没有控制台错误。

playSampleAction

必须返回一个函数才能在单击时触发它：

playSampleAction(sample,sampleId) {
   return function(event){
      console.log(sample);
   }
}

---

反应道具在渲染时进行评估。因此，将触发prop中调用的所有函数，如

onClick

。您要做的是回调

onClick

，使其仅在单击时触发。因此，

playSampleAction

必须返回一个函数

您立即调用该函数，并将返回值传递给

onClick

，这使它看起来像是在加载时运行的。必须传递函数的引用，而不是调用：

onClick={this.playSampleAction.bind(undefined, sample, sample.id)}

它使用的是绑定

this

上下文和其他参数，返回一个新的可调用函数并应用这些参数。从文件中：

bind（）

方法创建一个新函数，在调用该函数时，将其this关键字设置为提供的值，并在调用新函数时提供的任何参数之前提供给定的参数序列

在上面的代码中，我传递了

此

的

未定义

，以及函数参数。因此，不会立即调用该函数，但会将a函数传递给

onClick

事件，而不是传递返回值的调用

注意：如果这是唯一要使用

playSampleAction

的地方，请将其绑定到类构造函数中，以避免每次单击时创建新函数

---

另一个（我认为，首选）解决方案是使用：

然后可以添加所需的任何参数。因为arrow函数只是匿名函数的较短语法，所以传递的是可调用函数，而不是调用。这将在单击时正确执行

onClick={() => this.playSampleAction(sample, sample.id)}