如何为 React 中的功能组件制作 onClick 处理程序？

Question

目标是让 App 组件在单击时执行某些操作（在本例中执行 activateLasers）

控制台给我这个：

src\index.js Line 8:12: 'activateLasers' is defined but never used no-unused-vars

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App() {

  function activateLasers(){
    console.log('Lasers activated!');
  };

  return (
   <div>
     <h1>some text</h1>
   </div>
  )
}
  // ========================================
  
ReactDOM.render(
  <App onClick='{activateLasers}' />,
  document.getElementById('root')
);

Answer 1

因为你在App函数内部定义了函数activateLasers，在scope外部不可用。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App(props) {
  return (
    <div onClick={props.onClick}>
      <h1>some text</h1>
    </div>
  )
}

function activateLasers(){
    console.log('Lasers activated!')
}
  
ReactDOM.render(
    <App onClick={activateLasers} />,
    document.getElementById('root')
);

另外，注意JSX中的表达式不要放在引号内。

关于你说的错误，这只是因为该函数没有在其父范围内使用。

更新：如果你想在组件内部使用该函数，只需在其中使用即可：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App() {
  function activateLasers(){
    console.log('Lasers activated!')
  }

  return (
    <div onClick={activateLasers}>
      <h1>some text</h1>
    </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Answer 2

在您的代码中，activateLasers 函数“从未使用”，因为它在组件范围之外。

在正确范围内应用函数的方法是：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App() {

  function activateLasers(){
    console.log('Lasers activated!');
  };

  return (
   <div onClick='{activateLasers}'>
     <h1>some text</h1>
   </div>
  )
}
  // ========================================
  
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

如何为 React 中的功能组件制作 onClick 处理程序？

How to make a onClick handler for a functonal component in React?

javascript

events

onclick

reactjs

react-component