Вызов вложенной функции в onClick не срабатывает

Question

У меня есть приложение, написанное на JavaScript с React. При нажатии кнопки в Safari на iOS onClick выполняет функцию, указанную в его теле, но эта функция принимает другую функцию в качестве обратного вызова, и эта функция обратного вызова не срабатывает.

Если я просто отправляю обратный вызов без анонимной функции, это работает. Но если я использую анонимную функцию для вызова обратного вызова, это не сработает.

Приведенный ниже код является выдержкой из метода render () класса React.

Это не работает в Safari на iOS (но прекрасно работает в Chrome на iOS):

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

Это работает в Safari на iOS и Chrome на iOS:

<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

In first snippet вы вызываете функцию и передаете возвращаемое значение функции в качестве параметра, но

In second snippet вы просто передаете function definition, и я думаю, что функция this.props.saveApplicationFunction не принимает второй второй параметр в качестве обратного вызова, который он будет вызывать.

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

В первом примере вы передаете функцию, которая ДОЛЖНА вызываться на вашем saveApplicationFunction, чтобы получить функцию click, во втором примере вы передаете свой saveApplicationFunction возврат функции click, которая была вызванав этой области.