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

Question

我是 React 的新手，在尝试触发已设置为 prop 的函数时遇到了一个问题。这是我的组件：

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

我要触发的事件是 playSampleAction。该事件似乎在我加载页面时触发，但在我单击时没有触发。我尝试在 onClick 末尾添加 .bind(this) 但仍然没有执行点击操作。值得注意的是，当我点击时没有控制台错误。

Answer 1

playSampleAction 必须 return 一个函数才能在点击时触发：

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

React 道具在渲染时进行评估。因此，prop 中调用的每个函数，如 onClick，都会被触发。你想要的是给 onClick 一个回调，让它只在点击时触发。所以playSampleAction必须return一个函数

Answer 2

您立即调用该函数并向 onClick 传递 return 值，这使得它在加载时看起来运行。您必须传递函数的引用，而不是调用：

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

这样做是使用 Function.prototype.bind 绑定 this 上下文和其他参数，return 应用这些参数创建一个新的可调用函数。来自文档：

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

在上面的代码中，我为 this 传递了 undefined 和函数参数。因此，该函数不会立即被调用，但该函数将被传递给 onClick 事件，而不是传递 return 值的调用。

注意：如果那是你要使用playSampleAction的唯一地方，请将其绑定到class构造函数中，以避免创建每次点击都会有新功能。

另一个（在我看来，首选）解决方案是使用 ES6 arrow functions:

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

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

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

onClick event handler called on load as opposed to on click

javascript

ecmascript-6

reactjs