react 中获取多个input输入框中的值的 俩种写法

目录

1. 使用受控组件

2. 使用非受控组件


1. 使用受控组件

这是React中最常见的方法,每个输入框都与React组件的state相关联,并通过onChange事件来更新state。

代码示例:

import React, { Component } from 'react';class MultipleInputExample extends Component {constructor(props) {super(props);this.state = {input1: '',input2: '',input3: ''};}handleInputChange = (event) => {const name = event.target.name;const value = event.target.value;this.setState({[name]: value});}handleSubmit = (event) => {event.preventDefault();const { input1, input2, input3 } = this.state;// 现在你可以在这里使用 input1、input2 和 input3 的值console.log('Input 1:', input1);console.log('Input 2:', input2);console.log('Input 3:', input3);}render() {return (<form onSubmit={this.handleSubmit}><inputtype="text"name="input1"value={this.state.input1}onChange={this.handleInputChange}/><inputtype="text"name="input2"value={this.state.input2}onChange={this.handleInputChange}/><inputtype="text"name="input3"value={this.state.input3}onChange={this.handleInputChange}/><button type="submit">提交</button></form>);}
}export default MultipleInputExample;

2. 使用非受控组件

在这种方法中,你可以使用ref来获取输入框的值。这通常在需要与非受控库或DOM集成时使用。

代码示例:

import React, { Component } from 'react';class MultipleInputExample extends Component {constructor(props) {super(props);this.inputRefs = {input1: React.createRef(),input2: React.createRef(),input3: React.createRef()};}handleSubmit = () => {const input1Value = this.inputRefs.input1.current.value;const input2Value = this.inputRefs.input2.current.value;const input3Value = this.inputRefs.input3.current.value;console.log('Input 1:', input1Value);console.log('Input 2:', input2Value);console.log('Input 3:', input3Value);}render() {return (<div><input type="text" ref={this.inputRefs.input1} /><input type="text" ref={this.inputRefs.input2} /><input type="text" ref={this.inputRefs.input3} /><button onClick={this.handleSubmit}>提交</button></div>);}
}export default MultipleInputExample;

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

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

相关文章

TCP ZeroWindow 问题

TCP Zero Window问题是指在TCP连接中&#xff0c;发送方为了保障可靠传输&#xff0c;会根据接收方反馈的窗口大小来控制发送窗口的大小&#xff0c;但当接收方窗口大小为0时&#xff0c;发送方就会停止发送&#xff0c;从而导致通讯中断的问题。下面我们将从多个方面详细阐述T…

在thonny软件里安装python包 比如 numpy pygame

有一些程序使用了第三方库。如果本地没有安装相应的Python包&#xff0c;这个程序就不能正常运行了。 Python包管理工具提供了对Python 包的查找、下载、安装、卸载的功能。 网络上有很多第三方库&#xff0c;不管要下载哪一个&#xff0c;都需要通过正确的名称来下载安装。 …

websocket+node+vite(vue)实现一个简单的聊天

1.前端逻辑 本项目基于之前搭建的vite环境&#xff1a;https://blog.csdn.net/beekim/article/details/128083106?spm1001.2014.3001.5501 新增一个登录页和聊天室页面 <template><div>登录页</div><div>用户名:<input type"text" pl…

【SA8295P 源码分析 (一)】14 - Passthrough配置文件 /mnt/vm/images/linux-la.config 内容分析

【SA8295P 源码分析】14 - Passthrough配置文件 /mnt/vm/images/linux-la.config 内容分析 系列文章汇总见:《【SA8295P 源码分析 (一)】系统部分 文章链接汇总 - 持续更新中》 本文链接:《【SA8295P 源码分析 (一)】14 - Passthrough配置文件 /mnt/vm/images/linux-la.confi…

无人机电力巡检:国网安徽实际案例解析

在科技快速发展的今天&#xff0c;传统行业正在经历前所未有的转型。电力巡检&#xff0c;这一看似传统且乏味的任务&#xff0c;却因为无人机技术的介入而焕发新生。今天&#xff0c;让我们深入了解一个具体的案例&#xff0c;探索无人机如何革新电力巡检。 案例背景&#xff…

香港闯关相关法律

在香港&#xff0c;与闯关活动相关的法律主要包括以下几个方面&#xff1a; 刑事法律&#xff1a;闯关活动可能涉及犯罪行为&#xff0c;如非法入境、非法越境等&#xff0c;这些行为都可能触犯香港的刑事法律。 消费者保护法律&#xff1a;由于闯关活动通常涉及消费者付费购买…

【Linux】:权限

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux的基础知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…

mac电脑安装雷蛇管理软件,实现调整鼠标dpi,移动速度,灯光等

雷蛇官网只给了win版本驱动 mac版本驱动到这里下载: GitHub - 1kc/razer-macos: Color effects manager for Razer devices for macOS. Supports High Sierra (10.13) to Monterey (12.0). Made by the community, based on openrazer. 安装后会显示开发者不明,请丢弃到垃圾桶.…

ORACLE内存结构

内存体系结构 ​​​​​​​ 目录 内存体系结构 2.1自动内存管理 2.2自动SGA内存管理 2.3手动SGA内存管理 2.3.1数据库缓冲区 2.3.1.1保留池 2.3.1.2回收池 2.3.2共享池 2.3.2.1SQL查询结果和函数查询结果 2.3.2.2库缓存 2.3.2.3数据字典缓存 2.3.3大池 2.3.4 …

Redux详解(二)

1. 认识Redux Toolkit Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。 通过传统的redux编写逻辑方式&#xff0c;会造成文件分离过多&#xff0c;逻辑抽离过于繁琐&#xff08;具体可看上篇文章 Redux详解一&#xff09;&#xff0c;React官方为解决这一问题&#xff0c;推…

MVC、MVP、MVVM理解 在什么情况下用什么页面架构

1、不用页面架构 优点&#xff1a;简单 缺点&#xff1a;可读性、可维护性、可扩展性很弱 应用场景&#xff1a;欢迎、关于、帮助、隐私条款、用户协议等待 2、mvc M&#xff1a;model 模型&#xff0c;包括数据请求及操作 V&#xff1a;xml C&#xff1a;Controller activit…

vue报错不能将类型“number”分配给类型“string”

目录 前情提要 报错信息&#xff1a; 适用场景&#xff1a; 解决方法&#xff1a; 代码案例中的逻辑&#xff1a; 修改方式&#xff1a; 前情提要 报错信息&#xff1a; 不能将类型“number”分配给类型“string” 适用场景&#xff1a; 前端是string类型的数据例如单选框…

【excel】列转行

列转行 工作中有一些数据是列表&#xff0c;现在需要转行 选表格内容&#xff1a;在excel表格中选中表格数据区域。点击复制&#xff1a;在选中表格区域处右击点击复制。点击选择性粘贴&#xff1a;在表格中鼠标右击点击选择性粘贴。勾选转置&#xff1a;在选择性粘勾选转置选…

c 语言基础:L1-047 装睡

你永远叫不醒一个装睡的人 —— 但是通过分析一个人的呼吸频率和脉搏&#xff0c;你可以发现谁在装睡&#xff01;医生告诉我们&#xff0c;正常人睡眠时的呼吸频率是每分钟15-20次&#xff0c;脉搏是每分钟50-70次。下面给定一系列人的呼吸频率与脉搏&#xff0c;请你找出他们…

【网络空间实战攻防能力训练】DHCP欺骗

注意!!!!! 本实验方法一定不要用来攻击公网的服务器,仅能在自己的虚拟机里进行操作!不然可能构成违法行为,大家一定注意! DHCP欺骗 0x01 实验环境搭建0x02 部署DHCP服务器1、配置Windows Server 20162、在Windows 2016 Server上添加DHCP服务器3、设置Kali Linux与Wind…

前端页面根据后端返回的文本将换行符(“↵”)进行换行展示

有时我们会遇到这种情况&#xff0c;后端传递了一大段包含了回车符的文本内容&#xff0c;前端展示的时候所有文字堆在一起&#xff0c;没有换行展示。 以下方法中content为后端返回的文本内容 方法一&#xff1a; “↵”符号在html中会识别别为\r,\n等转义字符&#xff0c;…

Ubuntu 18.04 LTS中cmake-gui编译opencv-3.4.16并供Qt Creator调用

一、安装opencv 1.下载opencv-3.4.16的源码并解压 2.在解压后的文件夹内新建文件夹build以及opencv_install 3.启动cmake-gui并设置 sudo cmake-gui&#xff08;1&#xff09;设置界面中source及build路径 &#xff08;2&#xff09;点击configure&#xff0c;选择第一个def…

正点原子嵌入式linux驱动开发——Linux按键输入

在前几篇笔记之中都是使用的GPIO输出功能&#xff0c;还没有用过GPIO输入功能&#xff0c;本章就来学习一下如果在Linux下编写GPIO输入驱动程序。正点原子STM32MP1开发板上有三个按键&#xff0c;就使用这些按键来完成GPIO输入驱动程序&#xff0c;同时利用原子操作来对按键值进…

Ubuntu20.4 设置代理

主要是涉及2个代理 涉及apt 可以在、/etc/apt/apt.conf 中进行修改 在系统全局可以在/etc/profile中进行修改

【深度学习基础知识(一):卷积神经网络CNN基础知识】

深度学习基础知识 深度学习基础知识&#xff08;一&#xff09;&#xff1a;卷积神经网络CNN基础知识 卷积神经网络CNN基础知识 0、目录 1. CNN卷积神经网络的特点 2. 卷积操作基础知识 2.1 卷积操作的概念2.2 卷积操作的种类2.3 卷积操作后特征图谱大小计算公式 3. 池化操…