如何用反应钩子停止负数?

2024-03-30

我使用 React Hook 来增加和减少数字。但是当减少到0以下然后计算负值时我遇到了一个问题,我不想要负值, 如何使用react hook停止负值?

我已经尝试过这段代码。

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;

任何建议,请。

Thanks


每当count减少得到最大值(使用Math.max()) of count - 1和 0 之后:

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何用反应钩子停止负数? 的相关文章

  • 为什么 iife 在一个简单的例子中不起作用?

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 使用 ApolloClient 从 useContext 挂钩导入一个简单变量

    我的反应相对较新 似乎无法导入client来自上下文的变量 我有一个名为 federation tsx 的文件 其中包含一些代码 我相信这应该是相关部分 const link createHttpLink uri process env U
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐

  • 自动选择按钮(如何关闭此功能?)

    我有 winform 按钮 当您加载表单时 会选择某个按钮 我所说的选择的意思是 如果按下 输入 则按下该按钮 我怎样才能改变我的按钮 让他们不再这样做 Tab 键顺序按照您在表单上添加控件的顺序设置 如果您的第一个可以按下 选择 编辑的控
  • 如何将字符串绘制到图像中?

    我正在尝试使用 image picker 库从相机获取图片 然后我想添加图片拍摄日期和时间的信息 那可能吗 谢谢 您可以使用将字符串绘制到图像中图2 1 12 https pub dev packages image 您必须在 dart 文
  • 在Webstorm中删除右侧的一个字符

    我忘记了这个按键绑定 和emacs是一样的Ctrl D我尝试过谷歌搜索 删除右侧一个字符 向前删除 删除下一个字符 等内容 这里有phpstorm 中的绑定 https www jetbrains com phpstorm webhelp
  • 如何访问 Ruby 中的基本命名空间?

    我正在文件模块存在的命名空间中编写代码 在另一个模块内 我需要访问 ruby File 类 在 php 中可以这样完成 File 如何在红宝石中做到这一点 File 前缀为 访问命名空间树的 根
  • 为什么 Javascript 不包含保留关键字,例如“Object”、“Array”、“Function”、“Number”...?

    一些特殊的词 例如Object Array Function Method Numberetc 不属于 Javascript 中的关键字 JavaScript 中的保留关键字 https stackoverflow com question
  • AWS IAM 策略允许用户创建具有特定策略/角色的 IAM 用户

    我想创建一个策略 允许创建具有有限权限或与创建它们的用户相同权限的 IAM 用户 基本上 我想允许一个用户创建另一个用户 但也想准确指定一个用户可以向另一个用户提供哪些策略 例如 我创建一个新用户 用户A 用户 A 仅有权创建具有 同样 有
  • 在上传到远程网站期间缩小/调整视频大小

    我有一个用 Ruby on Rails 编写的 Web 应用程序 它使用表单将视频从用户上传到服务器 我实际上使用直接上传到 s3 的 jquery 上传器 但我认为这不相关 为了减少视频的上传时间 我想缩小它的大小 例如如果视频大小为 1
  • 如何在aspell字典中使用Unicode?

    我正在尝试使用aspell检查我的文本中的拼写 我有一本自定义词典 但有例外 它们都是 ASCII 格式的 但有一个单词是 Unicode 格式的 foo en pws personal ws 1 1 en 554 Foo bar B rb
  • MySQL 拆分和连接值

    我有一个表 mapping 有 2 列 类似于下面 id values 1 1 2 2 1 2 3 3 1 1 4 1 1 2 另一个表 map 与此类似 sno values 1 Test 2 Hello 3 Hai 我的预期输出是 id
  • 如何更改SQL Server中主键的列长度?

    我知道如何更改列的长度 但我的 SQL 语句失败 因为我尝试更改的列是 PK 因此出现以下错误 消息 5074 16 级 状态 1 第 1 行对象 PK TableName 依赖于列 PersonID 人物ID PK 我读了更改sql se
  • 使用 PHP 从 Excel 文件 (xlsx) 中提取图像

    如何使用PHPExcel从excel文件中读取图像并将图像保存在服务器中并显示它们 该文件的扩展名是 xlsx My code objPHPExcel PHPExcel IOFactory load path foreach objPHPE
  • 函数类型可以通过推理来定义吗?

    Scala 类型推断非常好 而且很容易习惯 不必写两次 当你不得不这么做的时候 你会更痛苦 函数类型就是这样的一个例子 有时我想为某些函数签名创建命名类型 有可能吗 有什么方法可以获取函数的编译时类型 这样我在定义时就不必再次输入它FTyp
  • 如何在引导后注入会话/用户对象?

    有一些示例将不同类型的对象注入到演示者中 但我找不到如何完成此操作的解释 In the 引导程序代码 http dev arcbees com gwtp get started Bootstrap Code html例如他们正在注入ASec
  • 如何测试 GAS 中的触发功能?

    Google Apps 脚本支持Triggers https developers google com apps script understanding triggers 那次通过Events https developers goog
  • 是否有 pycharm_helpers 的存储库

    最近我开始使用皮查姆 2017用于Docker 中的远程调试我意识到 PyCharm 的每个版本都会有一个新的图像pycharm helpers被拉取 根据构建使用不同的标签 有什么办法可以下载全部吗pycharm helpers图片 或者
  • 在 tibble 中添加具有可变列名称的列

    此代码无法在 tibble 中添加列 library tidyverse df lt data frame Oranges 5 mycols lt c Apples Bananas Oranges add column df mycols
  • spring mvc 不返回 json 内容 - 错误 406

    我正在使用 Spring MVC 和 JSON 如中指定的Ajax 简化 Spring 3 0 文章 http blog springsource org 2010 01 25 ajax simplifications in spring
  • IIS 10 上的 OWIN WebApi 项目对所有操作均给出 404

    我有一个 OWIN WebAPI 项目 它在 OwinSelfHost 中工作 但在 IIS 10 上托管时总是导致 404 唯一有效的是初始页面 public index html 我在 Windows 10 计算机上运行 IIS 10
  • 如何在meteor上创建默认用户?

    如果不存在用户 我想创建一个管理员用户 我在服务器文件夹内的 js 文件上尝试过 Meteor startup function if Meteor users find count var options username admin p
  • 如何用反应钩子停止负数?

    我使用 React Hook 来增加和减少数字 但是当减少到0以下然后计算负值时我遇到了一个问题 我不想要负值 如何使用react hook停止负值 我已经尝试过这段代码 import React useState useEffect fr