Calling a javascript function in JSX: why does calling a function without the () work?

问题

Currently on Codecademy and learning about React.

Came to this code:

import React from 'react';
import ReactDOM from 'react-dom';

function makeDoggy(e) {
  // Call this extremely useful function on an <img>.
  // The <img> will become a picture of a doggy.
  e.target.setAttribute('src', 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg');
  e.target.setAttribute('alt', 'doggy');
}

const kitty = (
  <img 
    src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
    alt="kitty" 
    onClick={makeDoggy}
  />
  	
);

ReactDOM.render(kitty, document.getElementById('app'));

The onClick attribute of const kitty is set to the function makeDoggy. To do this, you have to indicate you are using Javascript hence the {} brackets.However, the correct answer uses makeDoggy instead of using the standard function call: makeDoggy().

Also, the makedoggy function has an e parameter. When does that parameter get passed and how can a call to makeDoggy be made with a nonexsistent parameter when the function requires one?

回答1:

Without parenthesis, you're not calling the function. The name of the function without the parenthesis is a reference to the function. Parentheses is not used in the function at that point because we are not calling the function at the point where the code is encountered, but instead want to pass a reference to the function. If you use makeDoggy() , the function will get called at that point, we instead want it to be called only after onClick, so we pass a reference to makeDoggy there.

Alternatively you can do onClick={()=>makeDoggy()}

e gets bound automatically using something called property initializer in es6.

回答2:

No need for too much stress the solution is just double quote elimination "", in ReactJs to call a function inside an element you just have to do the following

onClick={functionName}

React can process function in curly braces.

来源：https://stackoverflow.com/questions/48259077/calling-a-javascript-function-in-jsx-why-does-calling-a-function-without-the

标签

javascript

reactjs

react-native

jsx