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

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(使用前将#替换为@)

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

  • pubnub 和 head.js

    有没有人成功整合过pubnub http www pubnub com 和 head js 正确吗 Pubnub http www pubnub com 希望我将他们的脚本放在页面底部并带有 div 就在它前面的标签 这可以确保在最后调用
  • Javascript - 在加载所有图像后执行

    看了别人的问题我想 window onload 会回答我的问题 我已经尝试过这个 但它会在页面加载时立即执行代码 而不是在图像加载之后 如果有什么区别的话 图像来自 CDN 并且不是相对的 有人知道解决办法吗 我没有使用 jQuery 想要
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 创建一个简单的 10 秒倒计时

    我想要一行这样写的 Your download will begin in 10 9 8 etc Beginning on page load seconds 我已经设置了 10 秒下载文本 并且我还查看了其他 stackoverflow
  • 限制可选 DOM 复选框

    我试图限制用户可以选择的复选框数量 这些复选框是为数组中的每个项目生成的 DOM 输入对象 我目前对此没有运气 因此非常感谢任何帮助 谢谢 在这里小提琴 http jsfiddle net vVxM2 222 http jsfiddle n
  • Chrome 扩展同步调用 - 仅在窗口关闭后创建窗口

    我有这个代码 function voteNewWindow mailNum chrome windows create url http www google com incognito true function window conso
  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • 如何更改自动完成中的结果过滤器?

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet
  • 在管道中重用变量的功能方式

    在 javascript 和 typescript 中与 Ramda 一起使用函数式编程 我经常发现自己编写如下代码 const myFun c gt const myId c id const value pipe getAnotherO
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 如何在 ASP.NET MVC 3 的 Razor 视图中编码嵌入的 javascript?

    如何在以下上下文中正确编码 JavaScript 我的 JSON 对象中的值是由应用程序管理员设置的 因此我假设它们需要正确编码 对于 HTML 和 JavaScript 都是如此 我在用着System Web Script Seriali
  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • React 应用程序中未调用 Microsoft Graph Toolkit 组件的事件处理程序

    我正在尝试在我的 React 应用程序中使用 Microsoft Graph Toolkit 中的登录组件 它工作得很好 但我似乎无法让任何事件发生 例如 import React from react import MgtLogin Pr
  • 使用 AngularJS 多部分表单数据将文件上传到 Google Cloud Storage

    我正在尝试使用 AngularJS 中指定的多部分方法将图像文件上传到 Google Cloud Storagehttps cloud google com storage docs json api v1 how tos upload m
  • IE 中的每个 JavaScript 支持?

    我有这个代码
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • JavaScript:测试与执行

    我想知道检查字符串 例如邮件 密码等 的最佳方法是什么 i exec a vs i test a exec返回值 test true test 1 way var mail req body mail if check mail exec
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

随机推荐

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

    我有 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