использование функциональных выражений в качестве обработчиков событий в Reactjs - PullRequest
Новая
       13

использование функциональных выражений в качестве обработчиков событий в Reactjs

0 голосов
/ 17 апреля 2020 
const templateTwo = (
    <div>
    <h1>Count :{count}</h1>
    <button  className="button" onClick={minusOne}>-1</button>
    <button onClick={function name() {
      console.log("nnn")
    }}>Reset</button>
    </div>
)

1) Согласно JSX 

You can put any valid JavaScript expression inside the curly braces in JSX.

2), но, читая документы для eventHandler в React, я обнаружил следующее 

 JSX you pass a function as the event handler, rather than a string.

3) До тех пор пока здесь все выглядит великолепно, но теперь в вышеприведенном коде я использовал функциональное утверждение как EventHandler, но это сработало, я в замешательстве, поскольку в документах мы должны использовать функциональные выражения внутри {}

4) Как это работает, мы можем использовать функциональные инструкции внутри {} (в jsx)

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Код, который вы используете, является выражением. 

// Function declaration:
function doStuff() {};

// Function expression:
const doStuff = function() {}

Итак, вы используете выражение функции и отлично работает, как и другие: 

onClick={function name() {console.log("nnn")}}

Подробнее о функциональное выражение .

Более того,

Это утверждение недопустимо: 

<a onClick={const doStuff = function doStuff(){console.log('nnn')}}>test</a>

Это выражение действительно: 

<a onClick={doStuff = function doStuff(){console.log('nnn')}}>test</a>

Оператор функции связан с подъемом переменной, а выражение функции связано с разрешающим значением. Таким образом, вы можете использовать в jsx все, что разрешает значение.

1 голос
/ 17 апреля 2020

В зависимости от контекста, function name() { } может быть либо объявлением функции , либо выражением функции. 

var a = function name() { };  // <-- function expression

function name() { }           // <-- function declaration

JSX ожидает здесь выражение внутри {}, поэтому Интерпретируется как выражение функции как ваша версия с ключевым словом function.

...