当前位置: 首页 > news >正文

react 获取表单中输入框的值

通过使用useState钩子来创建一个状态变量,你可以同时获取多个Input框的值。

1获取input框的值:

import React, { useState } from 'react';function MyComponent() {const [forms, setForms] = useState({name: '',nation: '',});const handleInputChange = (e) => {const { name, value } = e.target;setForms((prevForms) => ({...prevForms,[name]: value,}));};const handleSubmit = (e) => {e.preventDefault();console.log('姓名:', forms.name);console.log('国家:', forms.nation);// 执行其他逻辑};return (<div><form onSubmit={handleSubmit}><inputtype="text"name="name"value={forms.name}onChange={handleInputChange}/><inputtype="text"name="nation"value={forms.nation}onChange={handleInputChange}/>{/* 添加其他Input框 */}<button type="submit">提交</button></form></div>);
}export default MyComponent;

2获取select框的值

import { useState } from 'react';
import { Select } from 'antd';const { Option } = Select;const YourComponent = () => {const [forms, setForms] = useState({name: "",nation: ""});const handleNameChange = (value) => {setForms(prevState => ({...prevState,name: value}));};const handleNationChange = (value) => {setForms(prevState => ({...prevState,nation: value}));};return (<><Select value={forms.name} onChange={handleNameChange}><Option value="John">John</Option><Option value="Jane">Jane</Option><Option value="Bob">Bob</Option></Select><Select value={forms.nation} onChange={handleNationChange}><Option value="USA">USA</Option><Option value="Canada">Canada</Option><Option value="UK">UK</Option></Select></>);
};

相关文章:

react 获取表单中输入框的值

通过使用useState钩子来创建一个状态变量&#xff0c;你可以同时获取多个Input框的值。 1获取input框的值&#xff1a; import React, { useState } from react;function MyComponent() {const [forms, setForms] useState({name: ,nation: ,});const handleInputChange (e…...

[虚幻引擎 UE5] EditableText(可编辑文本) 限制只能输入数字并且设置最小值和最大值

本蓝图函数可以格式化 EditableText 控件输入的数据&#xff0c;让其只能输入一定范围内的整数。 蓝图函数 调用方法 下载蓝图&#xff08;5.2.1版本&#xff09;https://dt.cq.cn/archives/618...

Docker技术--Docker容器管理

1.Docker容器相关的指令(单个容器操) 我们之前在Docker中部署了一个实际应用的案例wordpress,其中使用到了一些相关于容器的指令,那么下面我们一起来总结使用。 Docker指令的语法规则如下所示: Docker + 命令关键字 [+参数选项] -1类:关闭、开启、重启、开启自启 systemct…...

three.js(七):内置的二维几何体

二维几何体 PlaneGeometry 矩形平面CircleGeometry 圆形平面RingGeometry 圆环平面 PlaneGeometry 矩形平面 PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer) width — 平面沿着X轴的宽度。默认值是1。height — 平面沿着Y…...

golang-bufio 缓冲读

缓冲 IO 计算机中我们常听到这样的两种程序优化方式&#xff1a; 以时间换空间以空间换时间 今天要来看的缓冲IO就是典型的以空间换时间&#xff0c;它的基本原理见上图。简单的解释就是&#xff1a;程序不再直接去读取底层的数据源&#xff0c;而是通过一个缓冲区来进行读取…...

前端 js实现 选中数据 动态 添加在表格中

如下图展示&#xff0c;表格上方有属性内容&#xff0c;下拉选中后&#xff0c;根据选中的内容&#xff0c;添加在下方的表格中。 实现方式&#xff0c;&#xff08;要和后端约定&#xff0c;因为这些动态添加的字段都是后端返回的&#xff0c;后端自己会做处理&#xff0c…...

MySQL—MySQL主从如何保证强一致性

一、前言 涉及到的东西&#xff1a;两阶段提交&#xff0c;binlog三种格式 1、两阶段提交 在持久化 redo log 和 binlog 这两份日志的时候&#xff0c;如果出现半成功的状态&#xff0c;就会造成主从环境的数据不一致性。这是因为 redo log 影响主库的数据&#xff0c;binlog…...

Lora升级!ReLoRa!最新论文 High-Rank Training Through Low-Rank Updates

目录 摘要1 引言2 相关工作3 方法4 实验5 结果6 结论7 局限性和未来工作 关注公众号TechLead&#xff0c;分享AI与云服务技术的全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室成员&#xff0…...

gateway动态路由和普通路由+负载均衡,借助eureka

gateway 中的动态路由和普通路由是相互独立配置的注意consumer使用了openFeign远程调用的配置文件中 prefer-ip-address: false 必须为false 否则 gateway的动态路由和负载均衡无法实现 spring:cloud:gateway:enabled: truediscovery:locator:enabled: true #表示动态路由&a…...

HTTP原理与实现

一、基本概念 一、基本原理* 1、全称&#xff1a; HyperText Transfer Protocol (超文本传输协议) 2、底层实现协议&#xff1a;建立在 TCP/IP 上的无状态连接。 3、基本作用&#xff1a;用于客户端与服务器之间的通信&#xff0c;规定客户端和服务器之间的通信格式。包括请…...

现在软件开发app制作还值得做吗

软件开发和制作App还是值得做的&#xff0c;但成功与否取决于多种因素。以下是一些影响你在软件开发和App制作领域发展的因素&#xff1a; 1、市场需求&#xff1a; 开发的App是否满足市场需求&#xff1f;是否解决了用户的问题或提供了有价值的功能&#xff1f;成功的App通常…...

java八股文面试[JVM]——类初始化过程

回顾类加载过程&#xff1a; 知识来源&#xff1a; 【2023年面试】Class初始化过程是什么_哔哩哔哩_bilibili...

什么是SQL注入攻击,解释如何防范SQL注入攻击?

1、什么是SQL注入攻击&#xff0c;解释如何防范SQL注入攻击。 SQL注入攻击是一种常见的网络攻击方式&#xff0c;攻击者通过在Web应用程序的查询语句中插入恶意代码&#xff0c;从而获取数据库中的敏感信息或者执行其他恶意操作。 为了防范SQL注入攻击&#xff0c;可以采取以…...

StringBuilder类分享(2)

一、StringBuilder说明 StringBuilder是一个可变的字符序列。这个类提供了一个与StringBuffer兼容的API&#xff0c;但不保证同步&#xff0c;即StringBuilder不是线程安全的&#xff0c;而StringBuffer是线程安全的。显然&#xff0c;StringBuilder要运行的更快一点。 这个类…...

IDEA查看类中的方法

做个记录 直接查看类中的方法&#xff0c;在打开的时候都会有。 查看单个类中的方法...

MySQL日期格式及日期函数实践

目录 日期格式 日期函数 CURDATE()和CURRENT_DATE()CURTIME()和CURRENT_TIME()NOW()和CURRENT_TIMESTAMP()DATE_FORMAT()DATE_ADD()和DATE_SUB()DATEDIFF()DATE()DAYNAME()和MONTHNAME() 1. 日期格式 在MySQL中&#xff0c;日期可以使用多种格式进行存储和表示。常见的日期格式…...

MySQL项目迁移华为GaussDB PG模式指南

文章目录 0. 前言1. 数据库模式选择&#xff08;B/PG&#xff09;2.驱动选择2.1. 使用postgresql驱动2.1. 使用opengaussjdbc驱动 3. 其他考虑因素4. PG模式4.1 MySQL和OpenGauss不兼容的语法处理建议4.2 语法差异 6. 高斯数据库 PG模式JDBC 使用示例验证6. 参考资料 本章节主要…...

流处理详解

【今日】 目录 一 Stream接口简介 Optional类 Collectors类 二 数据过滤 1. filter()方法 2.distinct()方法 3.limit()方法 4.skip()方法 三 数据映射 四 数据查找 1. allMatch()方法 2. anyMatch()方法 3. noneMatch()方法 4. findFirst()方法 五 数据收集…...

Qt中XML文件创建及解析

一 环境部署 QT的配置文件中添加xml选项&#xff1a; 二 写入xml文件 头文件&#xff1a;#include <QXmlStreamWriter> bool MyXML::writeToXMLFile() {QString currentTime QDateTime::currentDateTime().toString("yyyyMMddhhmmss");QString fileName &…...

【pyqt5界面化工具开发-11】界面化显示检测信息

目录 0x00 前言&#xff1a; 一、布局的设置 二、消息的显示 0x00 前言&#xff1a; 我们在10讲的基础上&#xff0c;需要将其输出到界面上 思路&#xff1a; 1、消息的传递 2、布局的设置 先考虑好消息的传递&#xff0c;再来完善布局 其实先完善布局&#xff0c;再来设置消…...

RAG的墓志铭:当AI不再需要检索

上个月读到一篇在 Hacker News 上引发热议的文章——《The RAG Obituary: Killed by Agents, Buried by Context Windows》。作者 Nicolas Bustamante 是金融科技公司 Fintool 的创始人&#xff0c;他在文中抛出了一个颇具争议的观点&#xff1a;RAG&#xff08;检索增强生成&a…...

Java AI开发避坑!

文章目录一、当"龙虾"突然发狂二、解剖这场"史诗级翻车"第一刀&#xff1a;插件生态大迁徙第二刀&#xff1a;API 接口一锅端第三刀&#xff1a;安全沙箱锁死第四刀&#xff1a;目录结构洗牌三、Java 开发者的至暗时刻WebSocket 连接闪断MCP 适配器失效技能…...

python基于微信小程序的方言文化传播平台的设计与开发

目录需求分析与规划技术选型与架构设计核心功能实现数据处理与优化测试与部署运营与迭代项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与规划 明确平台的核心功能需求&#xff0c;包括方言内容展示、语音录制与分享、…...

SLAM Toolbox应用宝典:从技术原理到实战落地的全面指南

SLAM Toolbox应用宝典&#xff1a;从技术原理到实战落地的全面指南 【免费下载链接】slam_toolbox Slam Toolbox for lifelong mapping and localization in potentially massive maps with ROS 项目地址: https://gitcode.com/gh_mirrors/sl/slam_toolbox SLAM Toolbox…...

5分钟搞定!用Docker Compose一键部署Penpot设计协作平台(含SMTP配置避坑指南)

5分钟极速部署Penpot&#xff1a;Docker Compose全流程指南与SMTP实战避坑 中小团队在设计协作工具选型时&#xff0c;往往陷入两难&#xff1a;商业软件成本高昂&#xff0c;开源方案部署复杂。Penpot作为Figma的开源替代品&#xff0c;凭借其完整的协作功能和零成本优势&…...

PyFluent:重新定义CFD仿真自动化的技术革命

PyFluent&#xff1a;重新定义CFD仿真自动化的技术革命 【免费下载链接】pyfluent 项目地址: https://gitcode.com/gh_mirrors/pyf/pyfluent 行业痛点分析&#xff1a;CFD工程师的效率困境 在现代工程设计流程中&#xff0c;计算流体动力学&#xff08;CFD&#xff09…...

ScanTailor Advanced:3步让你的扫描文档焕然一新

ScanTailor Advanced&#xff1a;3步让你的扫描文档焕然一新 【免费下载链接】scantailor-advanced ScanTailor Advanced is the version that merges the features of the ScanTailor Featured and ScanTailor Enhanced versions, brings new ones and fixes. 项目地址: htt…...

告别‘缺少DLL’:用EnigmaVB给Qt5.14程序封包的保姆级避坑指南

告别“缺少DLL”困境&#xff1a;EnigmaVBQt5.14封包全流程实战手册 当你用Qt Creator完成开发&#xff0c;满怀期待地将程序打包发给用户&#xff0c;却收到“缺少xxx.dll”的报错反馈时&#xff0c;这种挫败感开发者都深有体会。本文将以Qt5.14为例&#xff0c;结合EnigmaVB封…...

手把手教你为i.MX6ULL开发板适配非标准分辨率LCD(以1024x600 OV5640为例)

i.MX6ULL开发板非标准分辨率LCD适配实战&#xff1a;从寄存器配置到图像稳定输出 在嵌入式视觉系统开发中&#xff0c;摄像头与显示设备的适配往往成为项目落地的关键瓶颈。当面对非标准分辨率的LCD屏幕时&#xff0c;开发者需要深入理解图像采集与显示的全链路原理&#xff0c…...

Outline数据迁移架构解析:构建跨平台知识库的无缝衔接方案

Outline数据迁移架构解析&#xff1a;构建跨平台知识库的无缝衔接方案 【免费下载链接】outline Outline 是一个基于 React 和 Node.js 打造的快速、协作式团队知识库。它可以让团队方便地存储和管理知识信息。你可以直接使用其托管版本&#xff0c;也可以自己运行或参与开发。…...