React onClick 适用于重新加载，但不适用于实际点击答案

【问题标题】：React onClick works on reload but not on actual clickReact onClick 适用于重新加载，但不适用于实际点击
【发布时间】：2021-01-11 07:55:54
【问题描述】：

你只需要第 13 行，我猜语法是正确的，但是当我重新加载页面时，它会在没有我点击按钮的情况下发出 2 次警报，然后当我点击它时它什么也没做

import { useState } from 'react';
import './App.scss';
import { FullPage, Slide } from 'react-full-page';
import First from './First';

function App() {
  const [count, setCount] = useState(0);
  return (
    <FullPage controls>
      <Slide>
        <h1>Inner slide content</h1>
        <First name="Nairi" count={count} />
        <button onClick={alert()} className="btn btn-dark">+</button>
        {/* <button onClick={setCount(count - 1)} className="btn btn-dark">-</button> */}
      </Slide>
      <Slide>
        <h1>Another slide content</h1>
      </Slide>
    </FullPage>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

() => 警报()。处理程序应该是一个函数，而不是函数的结果。同样的原则也适用于第二次点击

标签： javascript html reactjs

【解决方案1】：

在下面！当组件最初呈现时，您会立即调用 alert 函数。这不是在反应中设置onClick 的正确方法。

<button onClick={alert()} className="btn btn-dark">+</button>

你需要做的：）因为它是javascript的alert函数。

<button onClick={()=>alert()} className="btn btn-dark">+</button>

一般情况下，我们只需要使用函数名而不使用()来设置我们的事件处理程序。

例如：您可以创建一个名为 handleClick 的单独函数并在其中调用您的警报。

<button onClick={handleClick} className="btn btn-dark">+</button>

const handleClick = ()=>{
   alert() 
}

【讨论】：

【解决方案2】：

你写警报的语法是错误的正确的是这个

<button onClick= {()=> alert()} className="btn btn-dark">+</button>

【讨论】：

【解决方案3】：

你需要传递一个回调函数而不是一个实际的函数。在您的代码中，只要您刷新页面并且浏览器到达第 13 行进行编译，警报功能就会运行。您必须改用onClick={alert} 或onClick={() => alert()}。

【讨论】：