时间戳

首页 > 解决方案 > JSX - Javascript 插入/奇怪的参数？

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

问题描述

嘿伙计们，我在 React.js 上尝试了自己，我在 JSX 中找到了 Event-listeners 的示例。

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这与它有关吗？

标签： javascriptreactjs

解决方案

当 makeDoggy(e) 被称为 {makeDoggy} 时，它没有通过任何东西？！

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

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

推荐阅读