React汇率小案例

import React from "react";
import Money from "./components/Money";
class App extends React.Component {
  // state
  state = {
    dollar: '',
    money: ''
  }
  transformRmb = (value) => {
    this.setState({
      // 保留后两位 并判断value值
      dollar: value === '' ? '' : (value * 7.2456).toFixed(2),
      money: value
    })
  }
  transformMy = (value) => {
    this.setState({
      dollar: value,
      // 保留后两位 并判断value值
      money: value === '' ? '' : (value * 0.138).toFixed(2)
    })
  }
  render() {
    return (
      <div className="App">

 

 

export default function Money(props) {
  function changeHandler(e){
    // 7.2456
    props.transform(e.target.value)
  }
  return (
    <div>
      {/* props有点像vue中的props */}
      <label>{props.content}</label>
      <input onChange={changeHandler} value={props.money} />
    </div>
  );
}


        <Money content='人民币:' money={this.state.money} transform={this.transformRmb} />
        <Money content='美元:' money={this.state.dollar} transform={this.transformMy} />
      </div>
    )
  }
}
export default App;

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/28666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASPICE标准与ASPICE认证:提升汽车软件开发质量与效率的关键途径

在当今日新月异的科技时代&#xff0c;软件产品的质量和可靠性成为了企业赢得市场的关键。而ASPICE&#xff08;Automotive SPICE&#xff09;标准&#xff0c;作为汽车行业中软件过程评估的国际通用标准&#xff0c;正逐渐引起行业的广泛关注。那么&#xff0c;ASPICE标准究竟…

【Rhino】【Python】Replace specified context of text object批量替换文字对象的指定内容

文章目录 在Rhino中批量修改文字对象内容的Python脚本脚本代码主要功能介绍1. 导入 rhinoscriptsyntax 模块2. 定义批量修改文字对象内容的函数3. 获取所有对象4. 遍历所有对象并修改文字内容5. 输出修改结果6. 设置旧文本和新文本&#xff0c;并运行函数 运行脚本总结 在Rhino…

使用 git 遇到权限错误

如果在执行 git 相关的命令的时候遇到权限错误&#xff0c;可能是因为你之前使用了不同的用户名在本地生成了SSH密钥。你可以尝试以下步骤来解决这个问题&#xff1a; 打开终端&#xff0c;并执行以下命令来删除旧的SSH密钥文件&#xff1a; rm ~/.ssh/id_rsa rm ~/.ssh/id_rsa…

Spring IoC【控制反转】DI【依赖注入】

文章目录 控制反转&#xff08;IoC&#xff09;依赖注入&#xff08;DI&#xff09;IoC原理及解耦IoC 容器的两种实现BeanFactoryApplicationContext IoC 是 Inversion of Control 的简写&#xff0c;译为“控制反转”&#xff0c;它不是一门技术&#xff0c;而是一种设计思想&…

解放双手 免费AI编程工具---Fitten Code

前言 相信大家在2023年后听说了不少的关于人工智能的话题&#xff0c;对于这种全新的科技又好奇又恐惧&#xff0c;今天我们来见识下一个在VS中的AI代码工具吧。 配置环境 安装 首先我们找到管理扩展&#xff0c;然后再搜索Fitten Code下载安装。 我这里已经下好过了&#xff…

MacOS系统搭建Appium自动化测试环境

一、Appium简介 1.1 什么是APPium APPium是一个开源测试自动化框架,适用于原生、混合或移动Web应用程序的自动化测试工具。 APPium使用WebDriver协议驱动iOS、Android等应用程序。 APPium具有如下特点: 支持多平台(Android、iOS等)。支持多语言(python、java、ruby、js…

【每日刷题】Day67

【每日刷题】Day67 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 23. 合并 K 个升序链表 - 力扣&#xff08;LeetCode&#xff09; 2. 1189. “气球” 的最大数量 - …

网络安全 - kali 安装

文章目录 Kali 安装教程下载镜像 Kali 安装教程 下载镜像 kali-images安装包下载_开源镜像站-阿里云 (aliyun.com) 下载对应镜像&#xff08;自己挑&#xff09; 打开本机 cmd 并输入一下命令 ipconfig找到 NAT 模式的 IP 地址并从虚拟机中 ping

6月15号作业

使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数 将登录按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0…

一键掌控,4G红外插座引领智能生活新潮流!

随着科技的进步&#xff0c;市场上出现大量带语音、手机APP可控制的智能插座产品&#xff0c;由此可看出客户对产品的功能要求也越来越高&#xff0c;追求舒适的体验感&#xff0c;特别是对操控性的要求越来越高。但是目前大部分红外遥控插座均为WiFi插座类型&#xff0c;WiFi红…

gitlab仓库中用git bash生成不是默认路径的ssh秘钥

使用命令 ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 会在默认路径生成秘钥&#xff0c;&#xff08;C:\Users\用户\.ssh\&#xff09; 想要修改默认路径使用如下命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com"…

【吉林大学Java程序设计】第11章:网络编程技术

第11章&#xff1a;网络编程技术 1.网络协议概述2.网络类及应用&#xff08;1&#xff09;InetAddress类&#xff08;2&#xff09;ServerSocket类&#xff08;3&#xff09;Socket类基于TCP的点对点通信基于TCP的点对面通信&#xff08;一个服务器&#xff0c;多个客户端&…

嵌入式学习——数据结构(顺序表、单向链表)——day46

1. 数据结构 1.1 定义 数据结构是指计算机中数据的组织、管理和存储方式。它不仅包括数据元素的存储方式&#xff0c;还包括数据元素之间的关系&#xff0c;以及对数据进行操作的方法和算法。数据结构的选择和设计直接影响算法的效率和程序的性能&#xff0c;是计算机科学与编…

Superset二次开发之重置密码

通过 Flask-AppBuilder CLI 工具重置密码 Superset 使用 Flask-AppBuilder 作为后台框架&#xff0c;可以通过其命令行工具重置密码。 使用 superset fab 命令重置密码&#xff1a; superset fab reset-password --username <your_username>

如何通过数据库与AI实现以图搜图?OceanBase向量功能详解

OceanBase支持向量数据库的基础能力 当前&#xff0c;数据库存储系统与人工智能技术的结合&#xff0c;可以体现在两个主要的应用方向上。 一、近似搜索。它利用大语言模型&#xff08;LLM&#xff0c;简称大模型&#xff09;的嵌入&#xff08;embedding&#xff09;技术&am…

高考专业抉择探索计算机专业的未来展望及适合人群

身份&#xff1a;一位正在面临人生重要抉择的高考生&#xff0c;一位计算机行业从业者  正文&#xff1a;  随着2024年高考落幕&#xff0c;我与数百万高三学生一样&#xff0c;又将面临人生中的重要抉择&#xff1a;选择大学专业。对于许多学生来说&#xff0c;计算机科学…

环境科学SCI期刊,IF=8.5+,期刊发展势头非常好

一、期刊名称 SUSTAINABLE DEVELOPMENT 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;环境科学与生态学 影响因子&#xff1a;8.562 中科院分区&#xff1a;2区 三、期刊征稿范围 该期刊是一本跨学科出版物&#xff0c;旨在解决和讨论实现可持续发展的…

硬件开发笔记(十八):核心板与底板之间的连接方式介绍说明:板对板连接器

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139663096 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

如何更改電腦的IP地址?

IP地址是每臺聯網設備的唯一識別字&#xff0c;但有時候&#xff0c;我們可能需要更改電腦的IP地址&#xff0c;要麼是為了解決網路問題&#xff0c;要麼是為了保護自己的線上隱私。下麵&#xff0c;我們將詳細介紹如何更改電腦的IP地址。 1. 更改本地IP地址 Windows系統 步…

最佳Google Chrome扩展和Mozilla Firefox扩展自动解决验证码

在这个信息爆炸的时代&#xff0c;我们每天都要处理大量的在线内容&#xff0c;验证码已成为不可避免的挑战。尽管它们旨在保护网站安全&#xff0c;但也常常成为我们获取信息的障碍。那么&#xff0c;有没有更简单的方法绕过这些验证码呢&#xff1f;答案是肯定的。通过使用一…