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

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 返回被调用的click 函数在这个范围内。

Answer 2

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

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

Answer 3

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

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

Answer 4

我的猜测是您的 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