设置默认重置按钮答案

【问题标题】：set default reset button设置默认重置按钮
【发布时间】：2023-03-26 00:17:01
【问题描述】：

参考代码：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;

抱歉，如果格式关闭，请提前致谢。

【问题讨论】：

标签： reactjs default reset use-state

【解决方案1】：

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));
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

有一个简单的方法，

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;
``

【讨论】：