reactjs 想要在屏幕上显示增量计数器值

wmtdaxz3 于 2023-01-25 发布在 React

关注(0)|答案(1)|浏览(166)

在不重新呈现组件的情况下，需要在屏幕上显示增量值（changes.current）。单击按钮时，增量发生，它显示在控制台上，但不改变屏幕上的值。我们需要显示增量值（changes.current）。我也尝试过document.getElementById("p_id")，但它不起作用。

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

export default function App() {
  let changes = useRef(0);
  const changingValue = () => {
    changes.current++;
    //To print on console
    console.log("New Value: " + changes.current);
  };
  // Statement to check the rerendering happening or not
  console.log("rendering not happening");

  return (
    <div className="App">
      {/* Button for click */}
      <button onClick={changingValue}>
        <b>Click me</b>
      </button>
      <p id='p_id'>{changes.current}</p>
    </div>
  );
}

预期：点击按钮时应显示更新值：enter image description here

reactjs

来源：https://stackoverflow.com/questions/75230614/want-to-display-the-increment-counter-value-on-screen

1条答案

按热度按时间

vuktfyat1#

改变React引用不会触发组件重新呈现。React组件重新呈现有以下3个原因之一：

React组件状态已更新。
1.已更新通过的 prop 。
1.父组件已重新渲染（因为其状态或属性已更新）。
更新某些局部状态将触发重新渲染。
示例：

import React, { useEffect, useState } from "react";

export default function App() {
  const [changes, setChanges] = useState(0);

  const changingValue = () => {
    // Enqueue state update to increment the current
    // state value by 1, trigger rerender
    setChanges(c => c + 1);
  };

  useEffect(() => {
    console.log(changes);
  }, [changes]);

  return (
    <div className="App">
      <button type="button" onClick={changingValue}>
        <b>Click me</b>
      </button>
      <p>{changes}</p>
    </div>
  );
}

您可以继续在React ref中存储任何值，但是为了查看任何更新的值，组件***必须***重新呈现，以便更新的UI可以刷新到DOM。

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 想要在屏幕上显示增量计数器值

1条答案

相关问题

热门标签

最新问答