Question

我有一个用JavaScript用React编写的应用程序。在iOS上的Safari中单击按钮时，onClick将执行其主体中指定的功能，但该功能将另一个功能用作回调，并且不会触发该回调功能。

如果我仅发送不带匿名函数的回调，则它将起作用。但是，如果我使用匿名函数来调用回调，它将无法正常工作。

下面的代码摘自React类的render（）方法。

这在iOS的Safari中不起作用（但在iOS的Chrome中很好用）：

<button className="button-top-level" data-selenium-id="preview"
          onClick={() => {
            this.props.saveApplicationFunction(null, () => this.refs.downloadButton.click(););
          }} type="button"><i className="material-icons">picture_as_pdf</i>Download a <span className="mobile-hide">copy of your </span>application</button>

这适用于iOS上的Safari和iOS上的Chrome：

<button className="button-top-level" data-selenium-id="preview"
          onClick={() => {
            this.props.saveApplicationFunction(null, this.refs.downloadButton.click());
          }} type="button"><i className="material-icons">picture_as_pdf</i>Download a <span className="mobile-hide">copy of your </span>application</button>

当它失败时，我没有收到任何错误，只是没有触发回调。我了解我可以使用工作示例，但是我想知道为什么第一个示例不起作用。

编辑：一些其他信息

Answer 1

第一个示例是传递一个必须在saveApplicationFunction上调用的函数才能获得click函数，第二个示例是传递给saveApplicationFunction的返回{ {1}}函数在此范围内被调用。

Answer 2

在JS中使用事件监听器，而不是HTML属性。

document.getElementsByClassName("button-top-level").addEventListener("click", function() {
    /*Your code here*/
});

Answer 3

我的猜测是您的saveApplicationFunction使用callback函数作为第二个参数。您只需传递功能名称即可。您正在做的是在第二个参数中 调用函数 。只需将函数的return值设置为callback。

function handler(value, callback){
  callback(value);
}

const callbackFunc = val => {
  if(val) console.log(val);
  return ()=>console.log('I do Nothing');
}

handler(5, callbackFunc); //Your Second Snippet
handler(5, callbackFunc()); //Your First Snippet

Answer 4

In first snippet您正在调用函数并将函数的返回值作为参数传递，但是

In second snippet您只是传递function definition，我认为函数this.props.saveApplicationFunction不接受第二个第二个参数作为它将调用的回调。

onClick中的嵌套函数调用未触发

4 个答案: