Question

我正在制作一个简单的反应计数器，在单击INC按钮的情况下，该值应更改h1内的值。但这不起作用。

我在App.js中的代码：

import React from "react";
import "./styles.css";

export default function App() {
  let count = 0;

  function handleInc () {
    return count++;
  }

  return (
    <>
      <div>
        <h1>{count}</h1>

        <div className='container'>
        <button onClick={handleInc}>INC</button>
        <button>DEC</button>
        <button>RESET</button>
        </div>
      </div>
    </>
  );
}

您能告诉我错误是什么吗？

Answer 1

您需要useState！每次单击时，此方法都会告诉您重新渲染此组件和所有子组件的反应，从而显示更新的dom计数器。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let [count, setCount] = useState(0);

  function handleInc () {
    return setCount(count + 1);
  }

  return (
    <>
      <div>
        <h1>{count}</h1>

        <div className='container'>
        <button onClick={handleInc}>INC</button>
        <button>DEC</button>
        <button>RESET</button>
        </div>
      </div>
    </>
  );
}

单击按钮时功能未重新渲染

1 个答案: