关于react里Input动态获取值的写法

最新推荐文章于 2025-06-10 11:54:05 发布

前端练习kun

最新推荐文章于 2025-06-10 11:54:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_59749798/article/details/126461303

本文探讨如何在React中通过优化onChange事件和state管理，简化Input组件的值获取和状态同步过程，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react里面我们经常会用到获取input框里面的值，正常情况下是一个一个获取进行赋值的

但是，如果仅仅是获取并赋值这类一样的操作，我们是不是可以简化一下

首先是：render里面的Input的onChange写法

这里的e代表的是自身的属性，一般获取value值为e.target.value，而后面的是我们state定义的需要赋值的类名，注意，你后面的值需要跟state里所定义的一模一项，不然无法动态获取

接下来的话就是赋值的环节，也是最关键的一步

在这里的话e代表本身的属性，key则是后戳那自己定义的类名，在这里可以使用key代替state进行赋值，而不用一个个进行this.setState的进行赋值，那样太过繁琐

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端练习kun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

react，button事件对象，以及获取input select的值的类式或函数式创建组件用法

jieweiwujie的博客

10-17

106

2 input，select类式三种方法。3 input，select函数式。1 button 类式。

（针对多个react版本）获取组件的dom元素/值

莫小猪的菜鸟进阶路

12-12

1223

工作中不免遇到各种react版本，获取dom元素/值是常见需求。所以今天针对目前的几个版本点提供不同的解决方案。欢迎留言讨论补充。感谢 ^ _ ^ 针对多个react版本 - 父组件获取子组件的dom元素/值 React 16.3版本以上第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现React 16.3版本以下第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现 React 16.3版本以上分两种情况：

参与评论您还未登录，请先登录后发表或查看评论

React input动态取值和赋值

最新发布

程序员阿超的博客

06-10

900

本文介绍了React中处理表单输入的"受控组件"方法。通过案例演示了如何用useState、value和onChange实现单个输入框的数据绑定，并扩展讲解了处理多个输入框的优化方案：使用单一状态对象和动态属性名来统一管理表单数据。受控组件的优势在于实现数据和UI的完全同步，便于实时校验和动态交互。文章还预告了后续将探讨如何使用useEffect进行API数据请求，为React应用添加后端通信能力。

js 赋值 react input的输入框

weixin_43939924的博客

05-05

1354

js 赋值 react input的输入框 javascript:(function () { setNativeValue = function (qs, value) { const element = document.querySelector(qs); const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set; c

实战react+ts+antd遇见的问题之input动态赋值

ArmadaDK的博客

06-13

1008

不知道什么原因，这个value没有作用，改了defaultValue也没用，只有placeholder有效，但是提交的时候就没有了，所以没什么用。我觉得可能是因为这里的p，我这个项目的form部分采用了组件复用，所以每个form组件的一些属性通过这个p来决定，所以我觉得可能是这个影响了value，让其失效。这样就不用在input的属性上进行操作，直接对form进行操作，对input进行赋值。第一个是form的控件的name。

如何通过 JS 设置React 页面下 textarea/input 元素输入值

VsXiXi的博客

02-23

830

在 React(或者其他js框架)页面下，直接使用。的方式赋值是无效的，value 无法正确的设置。

【JavaScript源代码】React获取input值并提交的2种方法实例.docx

12-29

### React中获取input值并提交的方法 #### 一、通过状态管理的方式获取input值 **原理简介** 在React中，为了确保数据的一致性和可控性，通常推荐使用组件的状态（`state`）来管理界面中动态变化的部分。当涉及到...

React组件的三种写法总结

08-31

本文将详细讨论React组件的三种主要写法：ES5的`React.createClass`，ES6的`React.Component`，以及无状态函数式组件（纯组件-SFC）。每种写法都有其特点和适用场景，理解这些差异对于优化代码质量和提高开发效率至...

react动态表单

coderYYA的博客

02-22

1130

AdvanceSearchForm组件 /* * @Description: * @Date: 2022-02-22 17:36:28 * @LastEditTime: 2022-02-22 21:24:53 * @FilePath: \testpull\githubreact\src\pages\AdvanceSearchForm\index.jsx */ import React, { useState } from 'react' import { Form, Row, Col, But

react学习——19react获取input的值（连续解构赋值+重命名）

ChenJin_2的博客

06-28

234

react学习——19react获取input的值（连续解构赋值+重命名）

当为React或Vue 时，INPUT，或 TEXTAREA 后台JS赋值

百万软件

07-01

710

event.initEvent('keydown', true, false) //注意这块触发的是keydown事件，在awx的ui源码中bind监控的是keypress事件，所以这块要改成keypress。//普通JS获取输入框Dom。inpEle.value = 'AAAA' //仅仅是模拟回车，则不需要这样，这样给input框设置值也是不生效的，正确给input设置值的方式参考上面的。//普通JS获取输入框Dom。//改变React的输入框的值。// 模拟键盘回车按键。

获取input值-react

冲鸭

09-01

819

【代码】获取input值-react。

React如何动态绑定input框的值

weixin_30697239的博客

06-30

1681

最近公司的项目选择了react作为前端开发技术框架，作为一名vue的忠实粉丝也不得不硬着头皮上了，毕竟要吃饭。只能一边学习一边开发了，今天踩的坑是 input输入框动态绑定数据后不能输入。查阅了一番终于了解了，先上代码 import React, {Component, Fragment} from "react"; // 首先还是引入需要使用的组件 class Fir...

react 函数式组件动态增加input

火凤凰的博客

03-06

2103

function D1(props) { //定义数组 const [arr, setArrs] = useState([]); //增加项目方法 const addItem = (item) => { setArrs((oldItems) => [...oldItems.concat(item)]); }; //子组件 input 输入框 const Fitem = (props) => ( <> <Form.Item ...

react如何获取input值_react如何处理多个input取值

weixin_39797693的博客

12-19

903

我们有这样的需求，页面中有很多input需要取值，如果数量少的话，可以一个一个的定义，但是如果数据多起来的话一个一个的处理显得太傻了，并且工作量会很多，网上查了一下，可以这样来统一处理我们的input。关键点就是我们传递一下name值，然后去setState里动态设置每个input的值，我们可以在render里边console.log(this.state)看一下，我们的每一项的值就是{name1...

react与动态input的问题

weixin_33919950的博客

01-07

423

1、用value、onchange、setstate的配合，能动态支持input输入了，但是下一次打开不同的table里的一行，并不能更新到新的初始值，还是旧的，于是加入了componentwillReceiveprops，重新setstate，倒是可以更新到新的初始值了，可是却不能支持动态input输入了。 2、用传统的jquery append进去的div，在下次打开table里不同的一行，也...

react获取input值

zybijiso666的博客

09-23

925

元素的值，你需要使用受控组件。受控组件意味着输入字段的值被React状态控制。这使得React重新渲染组件，并将输入字段的值更新为最新的。属性绑定到状态变量，并将输入元素的事件处理程序绑定到。当用户在输入字段中键入时，在React中，要获取。

rangepicker获取开始日期和结束日期react写法

10-31

在React中，你可以使用第三方库如`Material-UI`或`date-fns`结合`DatePicker`组件来自行创建范围选择器（RangePicker）。下面是一个简单的例子，使用`@material-ui/pickers`库：首先，你需要安装必要的依赖： ```bash npm install @material-ui/core @material-ui/pickers date-fns ``` 然后，在组件中引入并使用`DateRangePicker`： ```jsx import React from 'react'; import { DatePicker, DateTimeFormat } from '@material-ui/pickers'; import moment from 'date-fns'; function CustomDateRangePicker({ onChange }) { const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); const onDatesChange = (dates) => { const start = dates[0]; const end = dates[1] || moment().endOf('day'); onChange([start, end]); }; return ( <div> <DatePicker label="Start Date" inputType="date" selected={startDate} onChange={(date) => setStartDate(date)} disablePast maxDate={endDate} /> <DatePicker label="End Date" inputType="date" selected={endDate} onChange={(date) => setEndDate(date)} minDate={startDate} disableFuture /> </div> ); } // 使用时： <CustomDateRangePicker onChange={(dates) => console.log(dates)} /> ``` 这个例子中，我们定义了两个`DatePicker`组件，它们会联动更新彼此的选择范围。当用户更改其中一个日期时，另一个日期会被限制在合理的范围内。