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></>);
};

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

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

相关文章

BlazorServer中C#与JavaScript的相互调用

BlazorServer中C#与JavaScript的相互调用 前言&#xff1a; ​ 虽然BlazorServer中推荐使用C#在razor页面中的替代JavaScript来完成逻辑的编写&#xff0c;但当需要使用第三方的javascript文件/组件里的内容时&#xff0c;则难免要在C#中调用其方法或对象。反之当你的(用到第…

【Go 基础篇】切片:Go语言中的灵活数据结构

在Go语言中&#xff0c;切片&#xff08;Slice&#xff09;是一种强大且灵活的数据结构&#xff0c;用于管理和操作一系列元素。与数组相比&#xff0c;切片的大小可以动态调整&#xff0c;这使得它成为处理动态数据集合的理想选择。本文将围绕Go语言中切片的引入&#xff0c;介…

WPF网格拖动自动布局效果

WPF网格拖动自动布局效果 使用Canvas和鼠标相关事件实现如下的效果: XAML代码: <Window x:Class="CanvasTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:

Linux部署RocketMQ并使用SpringBoot创建生产、消费者

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;RocketMQ、消息队列☀️每日 一言&#xff1a;在你心灰意冷、心烦意乱时也不要停下你的脚步&#xff01; 一、前言 RocketMQ&#xff08;Apache RocketMQ&#xff09;是一种开源的分布式消息中间…

聊一聊微前端框架的选型和实现 | 业务平台

一、项目背景 目前&#xff0c;我们开发维护的项目主要有 6 个&#xff0c;但是分别对应 PC 和 H5 两个端&#xff1a; 如上图所示&#xff0c;我们 6个项目最开始是一个一个进行开发维护的&#xff0c;但是到后期&#xff0c;这几个项目之间有的部分会有业务逻辑不同&#xff…

AUTOSAR从入门到精通-【应用篇】基于 AUTOSAR 的辅助驾驶系统域控制器软件开发(续)

目录 3.4 软件平台 CameraService 模块开发 3.4.1 中继模块 3.4.2 数据管理与调度模块

BUUCTF [SWPU2019]Web1

​ 这是一道sql二次注入题目&#xff0c;但是注入点并不在登录处 注册一个用户然后登录 广告申请处进行sql注入 你会发现过滤了很多关键字 空格#information等等 这里用到了一些绕过技巧 使用 /**/ 代替空格 union/**/select/**/1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,1…

c++11 标准模板(STL)(std::basic_ostringstream)(一)

定义于头文件 <sstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ostringstream;(C11 前)template< class CharT, class Traits std::char_traits<CharT>, class Allocator std::allo…

LLaMA中ROPE位置编码实现源码解析

1、Attention中q&#xff0c;经下式&#xff0c;生成新的q。m为句长length&#xff0c;d为embedding_dim/head θ i 1 1000 0 2 i d \theta_i\frac{1}{10000^\frac{2i}{d}} θi​10000d2i​1​ 2、LLaMA中RoPE源码 import torchdef precompute_freqs_cis(dim: int, end: i…

uniapp 开发微信小程序使用echart的dataZoom属性缩放功能不生效!bug记录!

在本项目中使用的是这个echart库 在项目中添加了dataZoom配置项但是不生效&#xff0c;突然想到微信小程序代码大小的限制&#xff0c;之前的echarts.js是定制的&#xff0c;有可能没有加dataZoom组件。故重新定制echarts.js。之前用的echarts版本是5.0.0&#xff0c;这次也是…

Web Components

Web Components标准非常重要的一个特性是&#xff0c;它使开发者能够将HTML页面的功能封装为custom elements&#xff08;自定义标签&#xff09;&#xff0c;可以使用CustomElementRegistry来管理自定义标签 <script>//1、创建自定义标签class NewElement extends HTML…

Java基础十八(正则表达式 + 日期时间)

1. 正则表达式 1.1 普通字符 字符描述示例[abc]匹配 […] 中所有字符[hlo] 匹配字符串 "hello world" 中所有的 h l o 字母[^ABC]匹配除了 […] 中所有字符[hlo] 匹配字符串 "hello world" 中除了 h l o 的所有字母[^a-z]匹配除了 […] 中所有字符[hlo] 匹…

Sinkhorn算法

Sinkhorn算法 介绍示例代码 介绍 Sinkhorn算法是一种用于解决最优传输问题的迭代算法。最优传输问题是指在给定两个概率分布 μ \mu μ和 ν \nu ν的情况下&#xff0c;找到一个最优的转移方案&#xff0c;使得从 μ \mu μ到 ν \nu ν的转移成本最小。Sinkhorn算法通过迭代…

C语言static关键字

目录 概述1. 局部变量1.1 普通局部变量1.2 静态局部变量 2.全局变量2.1 普通全局变量2.2 静态全局变量 3.函数4.静态块总结 概述 本文简单介绍一下static关键字在c语言中的应用。 1. 局部变量 1.1 普通局部变量 普通局部变量是在函数内部或代码块内部定义的变量。这些变量只…

Docker file解析

文章目录 简介构建的三步骤Docker执行Dockerfile的大致流程DockerFile常用保留字指令创建第一个Dockerfile镜像的缓存特性 Docker file 解析 简介 Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本&#xff0c;记录了镜像构…

单片机IO模拟串口协议

一、前言 嵌入式硬件平台调试中常用的debug方法是看串口打印定位问题&#xff0c;但有时候会遇到单片机没有串口外设或者串口引脚被占用的情况&#xff0c;这时候也可以在代码里操作空闲的IO输出不同个数的脉冲来达到调试的效果&#xff0c;但是要用逻辑分析仪抓线逐个看波形比…

在渗透测试中,探测到6379端口,你打算怎么利用

在渗透测试中&#xff0c;探测到6379端口&#xff0c;你打算怎么利用&#xff1f; 6379端口是Redis数据库的默认端口号。Redis是一种基于键值对的内存数据库&#xff0c;具有高性能和灵活的数据存储和检索功能。6379端口是Redis数据库的默认通信端口&#xff0c;用于连接到Red…

Redis数据结构:Set类型全面解析

Set 类型是一个无序并唯一的键值集合&#xff0c;它的存储顺序不会按照插入的先后顺序进行存储。Redis 中集合是通过哈希表实现的&#xff0c;所以添加&#xff0c;删除&#xff0c;查找的复杂度都是 O(1)。相对于列表&#xff0c;集合也有两个特点&#xff1a;无序、不可重复 …

从零开始学习 Java:简单易懂的入门指南之包装类(十九)

包装类 包装类5.1 概述5.2 Integer类5.3 装箱与拆箱5.4 自动装箱与自动拆箱5.5 基本类型与字符串之间的转换基本类型转换为StringString转换成基本类型 5.6 底层原理 算法小题练习一&#xff1a;练习二&#xff1a;练习三&#xff1a;练习四&#xff1a;练习五&#xff1a; 包装…

Java代码优化案例2:使用HashMap代替List进行数据查找

在开发过程中&#xff0c;我们经常需要在一个集合中查找某个元素。一种常见的做法是使用List来存储数据&#xff0c;然后通过循环遍历List来查找目标元素。然而&#xff0c;当数据量较大时&#xff0c;这种做法效率较低。我们可以通过使用HashMap来优这个过程。 1. 原始代码实…