问如何使用react钩子停止负数？
EN

Stack Overflow用户

提问于 2021-02-06 13:02:44

回答 2查看 217关注 0票数 0

我将React Hook用于递增和递减数字。但是我遇到了一个问题，当减到0以下，然后计算负值时，我不想要负值，我如何用react钩子停止负值？

我已经试过这个代码了。

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

const Home = () => {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(count + 1);
  };
  const onClickDec = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Please click me for increase {count}</h1>
      <button className="btn btn-primary btn-sm" onClick={onClick}>
        +
      </button>
      <button className="btn btn-primary btn-sm" onClick={onClickDec}>
        -
      </button>
    </div>
  );
};

export default Home;

有什么建议请提出来。

谢谢

javascript

reactjs

react-hooks

平台电商解决方案

为客户提供电商客服、电商图片系统识别及搜索的快速搭建方案

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-06 13:06:18

每当count减少时，在和0之后获取count - 1的最大值(使用Math.max())：

const { useState } = React;

const Home = () => {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(c => c + 1);
  };
  const onClickDec = () => {
    setCount(c => Math.max(c - 1, 0));
  };

  return (
    <div>
      <h1>Please click me for increase {count}</h1>
      <button className="btn btn-primary btn-sm" onClick={onClick}>
        +
      </button>
      <button className="btn btn-primary btn-sm" onClick={onClickDec}>
        -
      </button>
    </div>
  );
};

ReactDOM.render(
  <Home />,
  root
)

<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="root"></div>

如果您想使用Math.min()将增量限制为某个数字，也可以使用相同的方法

const { useState } = React;

const Home = () => {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(c => Math.min(c + 1, 3));
  };
  const onClickDec = () => {
    setCount(c => Math.max(c - 1, 0));
  };

  return (
    <div>
      <h1>Please click me for increase {count}</h1>
      <button className="btn btn-primary btn-sm" onClick={onClick}>
        +
      </button>
      <button className="btn btn-primary btn-sm" onClick={onClickDec}>
        -
      </button>
    </div>
  );
};

ReactDOM.render(
  <Home />,
  root
)

<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="root"></div>

票数 4

Stack Overflow用户

发布于 2021-02-06 13:13:24

国际海事组织。最简单的解决方案是禁用该按钮。

const { useState } = React;

const Home = () => {
  const [count, setCount] = useState(0);
  const onClick = () => {
setCount(count + 1);
  };
  const onClickDec = () => {
setCount(count - 1);
  };

  return (
<div>
  <h1>Please click me for increase {count}</h1>
  <button className="btn btn-primary btn-sm" onClick={onClick}>
    +
  </button>
  <button disabled={count < 1} className="btn btn-primary btn-sm" onClick={onClickDec}>
    -
  </button>
</div>
  );
};

ReactDOM.render(
  <Home />,
  root
)

<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="root"></div>