React实现字符串首字母大写、翻转字符串、获取用户选定的文本

目录

  • React实现字符串首字母大写
  • React实现翻转字符串
  • React获取用户选定的文本


React实现字符串首字母大写

请添加图片描述

import React, { useState } from 'react'function App() {const [inputText, setInputText] = useState('')const [outputText, setOutputText] = useState('')const handleInputChange = e => {setInputText(e.target.value)}const handleButtonClick = () => {const capitalizedText = inputText.charAt(0).toUpperCase() + inputText.slice(1)setOutputText(capitalizedText)}return (<div><input type="text" value={inputText} onChange={handleInputChange} /><button onClick={handleButtonClick}>转换</button><p>结果: {outputText}</p></div>)
}export default App

在这个React的案例中,我们首先导入了React和useState钩子函数。

然后,我们定义了一个函数组件App,它包含了两个状态变量inputTextoutputText,分别用于存储输入文本和输出文本。

我们使用useState钩子函数来创建这两个状态变量,并通过数组解构赋值的方式获取它们的当前值和更新函数。

接下来,我们定义了两个事件处理函数:

  • handleInputChange函数用于处理输入框的变化事件,将输入的文本更新到inputText状态变量中。
  • handleButtonClick函数用于处理按钮的点击事件,将输入文本的首字母大写后的结果更新到outputText状态变量中。

在组件的返回部分,我们渲染了一个输入框、一个按钮和一个用于显示输出文本的段落。

  • 输入框通过value属性和onChange事件绑定到inputText状态变量,实现双向数据绑定。
  • 按钮的点击事件绑定到handleButtonClick函数。
  • 输出文本通过outputText状态变量进行显示。

当用户在输入框中输入文本并点击按钮时,首字母大写的结果将显示在输出段落中。

这个案例的实现思路是,通过事件处理函数获取用户输入的文本,并使用JavaScript的字符串方法charAtslice来将首字母大写。然后,将首字母大写后的结果更新到输出文本的状态变量中,从而实现字符串首字母大写的效果。

用户输入的文本将在输出段落中以首字母大写的形式显示出来。

React实现翻转字符串

请添加图片描述

import React, { useState } from 'react'function App() {const [inputText, setInputText] = useState('')const [reversedText, setReversedText] = useState('')const handleInputChange = e => {setInputText(e.target.value)}const handleButtonClick = () => {const reversed = inputText.split('').reverse().join('')setReversedText(reversed)}return (<div><input type="text" value={inputText} onChange={handleInputChange} /><button onClick={handleButtonClick}>翻转</button><p>结果: {reversedText}</p></div>)
}export default App

在这个React的案例中,我们同样首先导入了React和useState钩子函数。

然后,我们定义了一个函数组件App,它包含了两个状态变量inputTextreversedText,分别用于存储输入文本和翻转后的文本。

我们使用useState钩子函数来创建这两个状态变量,并通过数组解构赋值的方式获取它们的当前值和更新函数。

接下来,我们定义了两个事件处理函数:

  • handleInputChange函数用于处理输入框的变化事件,将输入的文本更新到inputText状态变量中。
  • handleButtonClick函数用于处理按钮的点击事件,将输入文本翻转后的结果更新到reversedText状态变量中。

在组件的返回部分,我们渲染了一个输入框、一个按钮和一个用于显示翻转后文本的段落。

  • 输入框通过value属性和onChange事件绑定到inputText状态变量,实现双向数据绑定。
  • 按钮的点击事件绑定到handleButtonClick函数。
  • 翻转后的文本通过reversedText状态变量进行显示。

当用户在输入框中输入文本并点击按钮时,翻转后的结果将显示在输出段落中。

这个案例的实现思路是,通过事件处理函数获取用户输入的文本,并使用JavaScript的字符串方法splitreversejoin来实现字符串的翻转。然后,将翻转后的结果更新到输出文本的状态变量中,从而实现字符串翻转的效果。

用户输入的文本将在输出段落中以翻转后的形式显示出来。

React获取用户选定的文本

请添加图片描述

import React, { useRef } from 'react'function App() {const textRef = useRef(null)const handleSelection = () => {const selectedText = window.getSelection().toString()alert(`选定的文字: ${selectedText}`)}return (<div><p ref={textRef}>思维决定行为,行为决定结果,结果决定位置,位置又决定了眼界、思维、资源、认知一样,一切兼为因果循环关系。</p><button onClick={handleSelection}>选定文字</button></div>)
}export default App

在这个React的案例中,我们首先导入了React和useRef钩子函数。

然后,我们定义了一个函数组件App,它包含了一个textRef引用,用于引用需要获取选定文本的元素。

我们使用useRef钩子函数来创建textRef引用。

接下来,我们定义了一个事件处理函数handleSelection,用于获取用户选定的文本。

在组件的返回部分,我们渲染了一个段落和一个按钮。

  • 段落通过ref属性绑定到textRef引用,使得我们可以在事件处理函数中获取到该元素。
  • 按钮的点击事件绑定到handleSelection函数。

当用户在段落中选定一段文本并点击按钮时,我们通过window.getSelection()方法获取用户选定的文本,并将其弹出显示在一个警告框中。

这个案例的实现思路是,通过使用ref属性将需要获取选定文本的元素与textRef引用关联起来。然后,在事件处理函数中,通过window.getSelection()方法获取用户选定的文本,并进行后续处理,例如弹出警告框显示选定的文本。

当用户在段落中选定文本并点击按钮时,将弹出一个警告框显示用户选定的文本。

持续学习总结记录中,回顾一下上面的内容:
React实现字符串首字母大写、翻转字符串、获取用户选定的文本的方法?

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

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

相关文章

编辑图片加文字的软件?分享4款!

在数字时代&#xff0c;图片和文字的结合已经成为信息传递的重要方式。为了满足广大自媒体人和内容创作者的需求&#xff0c;本文将为您推荐几款编辑图片加文字的软件&#xff0c;帮助您轻松实现创意表达。 魔法抠图大师 作为一款专业的图片编辑软件&#xff0c;还提供了多种编…

四、MyBatis 动态语句

本章概要 动态语句需求和简介if 和 where 标签set 标签trim 标签(了解)choose/when/otherwise 标签foreach 标签sql 片段 4.1 动态语句需求和简介 经常遇到很多按照很多查询条件进行查询的情况&#xff0c;比如智联招聘的职位搜索等。其中经常出现很多条件不取值的情况&#…

IDEA插件(MyBatis Log Free)

引言 在Java开发中&#xff0c;MyBatis 是一款广泛使用的持久层框架&#xff0c;它简化了SQL映射并提供了强大的数据访问能力。为了更好地调试和优化MyBatis应用中的SQL语句执行&#xff0c;一款名为 MyBatis Log Free 的 IntelliJ IDEA 插件应运而生。这款插件旨在帮助开发者…

STM32F407移植OpenHarmony笔记1

参考文档&#xff1a; OpenAtom OpenHarmonywidthdevice-width,initial-scale1.0https://docs.openharmony.cn/pages/v3.2/zh-cn/device-dev/get-code/gettools-acquire.md/ 搭建环境 安装linux系统: Ubuntu 22.04.2 LTS (GNU/Linux 5.15.0-91-generic x86_64) 下载源代码&a…

2分钟搞定《幻兽帕鲁》联机服务,真爽!

2分钟搞定《幻兽帕鲁》联机服务&#xff0c;真爽&#xff01;教程 https://t.aliyun.com/U/DKivPS 幻兽帕鲁是Pocketpair开发的一款开放世界生存制作游戏&#xff0c;游戏于2024年1月18日发行抢先体验版本。游戏中&#xff0c;玩家可以在广阔的世界中收集神奇的生物“帕鲁”&a…

Zabbix 整合 Prometheus:案例分享与操作指南

一、简介 Zabbix 和 Prometheus 都是流行的开源监控工具&#xff0c;它们各自具有独特的优势。Zabbix 主要用于网络和系统监控&#xff0c;而 Prometheus 则专注于开源的分布式时间序列数据库。在某些场景下&#xff0c;将这两个工具整合在一起可以更好地发挥它们的优势&#…

论文阅读:Vary-toy论文阅读笔记

目录 引言整体结构图方法介绍训练vision vocabulary阶段PDF数据目标检测数据 训练Vary-toy阶段Vary-toy结构数据集情况 引言 论文&#xff1a;Small Language Model Meets with Reinforced Vision Vocabulary Paper | Github | Demo 说来也巧&#xff0c;之前在写论文阅读&…

28个炫酷的纯CSS特效动画示例(含源代码)

CSS是网页的三驾马车之一&#xff0c;是对页面布局的总管家&#xff0c;2024年了&#xff0c;这里列出28个超级炫酷的纯CSS动画示例&#xff0c;让您的网站更加炫目多彩。 文章目录 1. 涌动的弹簧效果2. 超逼真的3D篮球弹跳&#xff0c;含挤压弹起模态3. 鼠标放div上&#xff0…

程序媛的mac修炼手册-- 如何用Python节省WPS会员费

上篇分享了如何用微博爬虫&#xff0c;咱举例爬了女明星江疏影的微博数据。今天就用这些数据&#xff0c;给大家安利一下怎么用Python实现WPS中部分Excel付费功能。 MacOS系统自带的工具&#xff0c;绝大多数都非常顶&#xff0c;除Numbers外。当然&#xff0c;page比起word来&…

c++文件操作(3)-- 随机读取

随机读取 文件指针 在文件中有一个文件指针。 我们通过控制文件指针的位置&#xff0c;来实现随机读取文件中的数据。文件指针在哪我们就从文件的哪个位置开始读取数据。 seekg(); // 用于设置文件指针的位置。 通过传入两个参数来实现位置设置&#xff0c;第一个参数&…

pycharm安装过程

1、安装包官网下载 PyCharm: the Python IDE for Professional Developers by JetBrains 点击下载 下拉选择社区版本 选择下载 下载完成后&#xff0c;双击exe安装。 安装完成&#xff0c;生成的桌面快捷方式 同意并继续 进入开发界面

JAVA 学习 面试(八)集合类

集合类 集合&#xff08;Collection&#xff09; 1、 List列表 &#xff1a; 有序 可重复 1、ArrayList : 数组列表 &#xff0c;内部是通过Array实现&#xff0c;对数据列表进行插入、删除操作时都需要对数组进行拷贝并重排序&#xff0c;因此在知道存储数据量时&#xff0c…