Реакция: вызов функций, почему первый работает, а не второй?

Question

Может быть, это глупый вопрос, но я хочу знать, почему так ...

const isDisabled = () => 
  // condition check

Это работает:

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

, но это не работает:

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>

Answer 1

В первом примере с this.isDisabled() вы вызываете функцию.
Во втором примере с this.isDisabled вы передаете ссылку на функцию без вызова.

Попробуйте console.log() их обоих увидеть разница.
Второй работает как переменная. Например:

var myFunction = this.isDisabled; // I've put the reference to myFunction
myFunction(); // now I've called isDisabled()

Answer 2

Когда вы добавляете круглые скобки наподобие this.isDisabled (), функция выполняется, и возвращаемое значение присваивается атрибуту disabled кнопки. Когда вы просто говорите disabled = this.isDisabled, вы просто передаете ссылку на функцию, и, следовательно, значение не оценивается.

Также помните, что атрибут disable на кнопке является логическим значением. Поэтому проверьте значение, которое вы возвращаете из функции.

Answer 3

Поскольку disabled должно быть логическим:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr -disabled