javascript - JSX - Javascript 插入/奇怪的参数？

Question

嘿，大家好，我正在尝试使用 React.js，并且在 JSX 中找到了事件监听器的示例。

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')); */

现在。我试图理解这里的一切。我注意到 JSX Event-Lsiteners 是用 Camelcase 编写的，而不是常规的 Javascript。 {} 用于将 Javascript 插入 JSX，但令我困惑的一件事(可能是因为我只是累了 :P)是 makeDoggy(e) 没有通过当它被称为 {makeDoggy} 时，会发生什么？!它仍然如何工作，我有点困惑。 target.setAttribute 与它有什么关系吗？

Answer 1

makeDoggy(e) doesnt get passed anything when its called its just {makeDoggy}?!

onClick={makeDoggy} 不会调用 makeDoggy。它只是将 makeDoggy 的引用传递到 onClick 处理程序中。当点击事件发生时，makeDoggy将被react的事件处理代码调用，并传入事件对象。

如果您将其更改为 {makeDoggy('something')}，则会立即调用 makeDoggy，然后获取返回值并将其传递给 onClick。