设置默认重置按钮

Question

参考代码：https://www.geeksforgeeks.org/what-is-usestate-in-react/

我正在尝试创建一个重置按钮，单击该按钮时，值将重置为其默认模式。我如何更改以下代码来执行此操作？

    //App.tsx
import React, { useState } from "react";
function App(props) {
  const [count, setRandomCount, setDefaultNumber] = useState(
    function generateRandomInteger() {
      return Math.floor(Math.random() * 100);
    }
  );
  function clickHandler(e) {
    setRandomCount(Math.floor(Math.random() * 100));
  }

  return (
    <div style={{ margin: "auto", width: 100, display: "block" }}>
      <h1> {count} </h1>

      <p>
        <button onClick={clickHandler}> Click </button>
        <button
          className="Set Default Number"
          onClick={() => setDefaultNumber()}
        >
          Reset
        </button>
      </p>
    </div>
  );
}

export default App;

抱歉，如果格式不正确，请提前致谢。

Answer 1

有一个简单的方法，

reset number 意味着，你需要设置特定的默认值，比如：0,1,2.

这段代码可以帮到您。

function App(props) {
    const [count, setRandomCount] = useState(Math.floor(Math.random() * 100))

    return (
        <div style={{ margin: "auto", width: 100, display: "block" }}>
            <h1> {count} </h1>
            <p>
                <button onClick={() => setRandomCount(Math.floor(Math.random() * 100))}> Click </button>
                <button
                    className="Set Default Number"
                    onClick={() => setRandomCount(0)} //pass your default number
                >
                    Reset
                </button>
            </p>
        </div >
    );
}

export default App;
``

Answer 2

在变量中有初始 defaultCount，在重置时，用默认值更新计数。

const defaultCount = Math.floor(Math.random() * 100);

function App() {
  const [count, setRandomCount] = React.useState(defaultCount);
  function clickHandler(e) {
    setRandomCount(Math.floor(Math.random() * 100));
  }

  return (
    <div style={{ margin: "auto", width: 100, display: "block" }}>
      <h1> {count} </h1>

      <p>
        <button onClick={clickHandler}> Click </button>
        <button
          className="Set Default Number"
          onClick={() => setRandomCount(defaultCount)}
        >
          Reset
        </button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 3

useState() 提供一个状态值和一个更新值的函数。在您的情况下，有状态值是计数，更新函数是 setRandomCount。下一个变量没有意义。

要完成我认为你想做的事情，请试试这个：

const [count, setCount] = useState(
function generateRandomInteger() {
  return Math.floor(Math.random() * 100);
}

);

现在要分配一些默认值，请添加一个使用 setCount() 的辅助函数。分配随机计数值也是如此。您可以使用 setCount() 作为随机数生成器的包装器。

示例：

function setDefaultNumber() {
  return setCount(Math.floor(Math.random() * 100));
}

设置默认重置按钮

set default reset button

default

reset

reactjs

use-state