首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从表单提交的多个输入框中获取值,并将值作为对象存储在React的状态数组中?

在React中,可以通过以下步骤从表单提交的多个输入框中获取值,并将值作为对象存储在状态数组中:

  1. 首先,在React组件的构造函数中初始化状态数组,例如:
代码语言:txt
复制
constructor(props) {
  super(props);
  this.state = {
    inputs: []
  };
}
  1. 在表单中的每个输入框中添加一个name属性,用于标识不同的输入框。例如:
代码语言:txt
复制
<input type="text" name="input1" />
<input type="text" name="input2" />
  1. 在表单的提交事件处理函数中,通过event.target.elements获取表单中的所有元素,并遍历它们。使用name属性来识别输入框,并将输入框的值存储在一个临时对象中。例如:
代码语言:txt
复制
handleSubmit(event) {
  event.preventDefault();
  const elements = event.target.elements;
  const inputs = {};
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    if (element.name) {
      inputs[element.name] = element.value;
    }
  }
  this.setState(prevState => ({
    inputs: [...prevState.inputs, inputs]
  }));
}
  1. 最后,在表单的onSubmit事件中调用上述提交事件处理函数。例如:
代码语言:txt
复制
<form onSubmit={this.handleSubmit}>
  {/* 表单输入框 */}
  <button type="submit">提交</button>
</form>

这样,每次提交表单时,输入框的值将被存储在React组件的状态数组中。你可以通过访问this.state.inputs来获取存储的对象数组。

这是一个基本的实现方法,可以根据具体需求进行调整和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 中非受控和受控组件

React 以这种方式控制取值表单输入元素就叫做“受控组件”。 让我们看以下示例以更好地理解此概念。...然而当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数,这会让代码看着很臃肿,所以为了解决这种情况,出现了非受控组件。 这个时候我们更推荐使用非受控组件。...非受控组件 不受控制组件是呈现表单元素并在 DOM 本身更新其组件。可以使用 ref 而不是为每个状态更新编写事件处理程序,以便 DOM 访问表单。...「默认 React 渲染生命周期中,DOM 将被表单元素上 value 属性覆盖。通过使用不受控制组件,您可能希望 React 设置初始,但保持后续更新不变。...若要使用非受控制组件,可以使用 ref 直接访问 DOM 。对于受控组件,我们将表单数据存储 React 组件状态属性

2.3K20

如何多个参数传递给 React onChange?

单个参数传递 React ,通常情况下,onChange 事件处理函数接收一个 event 对象作为参数。event 对象包含了很多关于事件信息,比如事件类型、事件目标元素等等。...下面是一个简单示例,其中演示了一个简单输入框并将存储组件状态。...当用户输入文本时,e.target.value 取得文本域,该被保存在 inputValue 状态。最后,inputValue 将被渲染到组件。...多个参数传递有时候,我们需要将多个参数传递给 onChange 事件处理函数。例如,假设我们有一个包含两个输入框表单。每个输入框都需要在变化时更新组件状态,但是我们需要知道哪个输入框发生了变化。...结论本文中,我们介绍了如何使用 React onChange 事件处理函数,并将多个参数传递给它。我们介绍了两种不同方法:使用箭头函数和 bind 方法。

2.2K20

React】243- React 组件中使用 Refs 指南

= this.focusTextInput.bind(this); ref 取值 在这个例子,我们将看到如何为 input 输入框设置 ref 属性,并通过 ref 来获取值。...示例如下: 在这个例子,我们创建了一个 input 输入框来输入。然后,当单击提交按钮时,我们将读取此,并在控制台打印。... render 函数,我们希望读取 form 下输入框。我们如何读取这个? 通过为 input 指定一个 ref ,然后读取 ref 。...(this.textInput.current.value); }; 使用 refs 是一种表单中直接提取值方式:只需要给 input 标签设置 ref ,并在你需要时候将提取出来。...…rest 是 props 解构(也就是说,我们会将 rest 数组所有参数作为 props 传递给 input 组件)。那么我们该如何使用 TextInput 组件呢?

3.8K30

React】282- React 组件中使用 Refs 指南

= this.focusTextInput.bind(this); ref 取值 在这个例子,我们将看到如何为 input 输入框设置 ref 属性,并通过 ref 来获取值。...示例如下: 在这个例子,我们创建了一个 input 输入框来输入。然后,当单击提交按钮时,我们将读取此,并在控制台打印。... render 函数,我们希望读取 form 下输入框。我们如何读取这个? 通过为 input 指定一个 ref ,然后读取 ref 。...(this.textInput.current.value);}; 使用 refs 是一种表单中直接提取值方式:只需要给 input 标签设置 ref ,并在你需要时候将提取出来。...…rest 是 props 解构(也就是说,我们会将 rest 数组所有参数作为 props 传递给 input 组件)。那么我们该如何使用 TextInput 组件呢?

3.3K10

React基础语法

条件渲染 React,可以创建不同组件来封装各种需要行为。然后依据应用不同状态,可以只渲染对应状态部分内容。...列表渲染有如下示例,同时需添加key属性,key能帮助React识别哪些元素改变,通常建议取值为该元素列表独一无二字符串,一般使用id来作为元素key,而当元素确定没有id时,万不得已也可使用元素索引...index作为key,但如果列表项目顺序未来可能会发生变化时,则不建议使用索引来作为key,因为这会导致性能变差,还可能引起组件状态问题。...React,当多个组件都需要反映相同变化数据时,可以将这个共享变化数据提升到最近父组件中去。...我们刚刚编辑输入框接收其当前,另一个输入框内容更新为转换后温度 React 应用,任何可变数据应当只有一个相对应唯一“数据源”。

4.9K40

React受控组件

React,受控组件是指那些其React状态(state)管理和控制组件。通过使用受控组件,我们可以将表单元素状态进行绑定,实现对用户输入控制和处理。...受控组件React受控组件是指那些其React状态管理和控制组件。我们可以通过组件中使用state来存储和管理组件,并使用onChange事件来更新状态。...该组件包含一个文本输入框和一个提交按钮。我们使用state来存储输入框并将其初始设置为空字符串。输入框value属性,我们将其绑定到组件状态,以便实现双向绑定。...每当输入框发生变化时,onChange事件被触发,并调用handleChange方法来更新组件状态。当表单提交时,我们可以通过this.state.value来访问输入框。...确保处理函数中使用setState方法来更新状态,以便React重新渲染组件并反映新表单验证:受控组件使得对用户输入进行验证变得更加容易。

76220

翻译 | 玩转 React 表单 —— 受控组件详解

当用户提交表单时,该数组将会是用户选择数据。 controlFunc:一个方法,用来处理 selectedOptions 数组 prop 添加或删除字符串操作。...如果没有 > -1,selectedOptions 数组第一个 item —— 其索引为 0 —— 将永远不会被渲染成选中状态,因为 0 是一个类 false (译注: checked 属性...如果 input 组件不在 selectedOptions 数组,我们要将添加进该数组。 如果 input 组件 selectedOptions 数组,我们要从数组删除该。...清除表单子组件显示数据很简单,只要把容器 state (译注:这里是指 state 对象上挂载各个变量)设置成空数组和空字符串就可以了(如果有数字输入框的话则是将设置成 0)。...2. handleFormSubmit 为了提交表单数据,我们 state 抽取需要提交属性,创建了一个对象。接着使用 AJAX 库或技术将这些数据发送给 API(本文不包含此类内容)。

11.4K100

React Ref 使用总结

类组件,可以实例上存放内容,这些内容随着实例化产生或销毁。但在 Hook ,函数组件并没有 this(组件实例),因此 useRef 作为这一能力弥补。...组件重新渲染时,返回 ref 对象组件整个生命周期内保持不变。变更 ref 对象 .current 属性不会引发组件重新渲染。...再看一个例子,实现一个下面动图这样功能,输入框输入数字相当于计时器毫秒延迟,当输入框数值变化时计时器会做相应调整。如何实现? ?...Hooks 声明 setInterval[1] 受控组件和非受控组件 如果一个表单元素是由 React 控制,就其称为受控组件。...this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event){ // 提交时获取到输入框

6.9K40

React非受控组件

React,组件状态(state)通常由组件自身管理和控制。然而,有时我们也可以使用非受控组件来处理表单元素或其他用户输入,这意味着我们不需要显式地管理和更新组件状态。...非受控组件React非受控组件是指那些其不由React状态管理组件。相反,它们依赖于底层DOM元素来存储和管理数据。我们可以使用ref来访问和操作非受控组件。...该组件包含一个文本输入框和一个提交按钮。我们使用ref来获取文本输入框引用,并将存储this.inputRef。...当表单提交时,我们使用this.inputRef.value获取输入框,并打印到控制台上。需要注意是,我们使用了箭头函数和ref属性来捕获输入框引用。...例如,当需要在表单提交时获取表单字段,并进行后续处理时,非受控组件是一个不错选择。第三方库集成:有时我们可能需要与第三方库集成,这些库可能依赖于底层DOM元素来存储和管理数据。

66020

react学习

React应用,组件是有状态组件还是无状态组件属于组件实现细节,它可能会随着时间推移而改变。你可以在有状态组件中使用无状态组件,反之亦然。...条件渲染 React,可以创建不同组件来封装各种你需要行为。然后依据应用不同状态,你可以渲染对象状态部分内容。...如果在React执行相同代码,它依然有效。但大多数情况下,使用JavaScript函数可以很方便处理表单提交,同时还可以访问用户填写表单数据。实现这种效果标准方式就是使用“受控组件”。...我们可以把两者结合起来,使Reactstate成为“唯一数据源”。渲染表单React组件还控制着用户输入过程中表单发生操作。被React以这种方式控制取值表单输入元素就叫“受控组件”。...文件input标签 HTML,允许用户存储设备中选择一个或多个文件,将其上传到服务器,或通过使用JavaScriptFile API进行控制。

4.3K20

react20道高频面试题答案总结

使用者角度而言,很难使用体验上区分两者,而且现代浏览器,闭包和类性能只极端场景下才会有明显差别。所以,基本可认为两者作为组件是完全一致。... React,组件负责控制和管理自己状态。如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...约束性组件( controlled component)就是由 React控制组件,也就是说,表单元素数据存储组件内部状态表单到底呈现什么由组件决定。...如下所示, username没有存储DOM元素内,而是存储组件状态。每次要更新 username时,就要调用 setState更新状态;每次要获取 username,就要获取组件状态。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储组件状态,而是存储表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它

3K10

2022高频前端面试题(附答案)

React,组件负责控制和管理自己状态。如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...约束性组件( controlled component)就是由 React控制组件,也就是说,表单元素数据存储组件内部状态表单到底呈现什么由组件决定。...如下所示, username没有存储DOM元素内,而是存储组件状态。每次要更新 username时,就要调用 setState更新状态;每次要获取 username,就要获取组件状态。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储组件状态,而是存储表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...React Fiber 目标是增强其动画、布局和手势等领域适用性。它主要特性是增量渲染:能够将渲染工作分割成块,并将其分散到多个。非嵌套关系组件通信方式?

2.4K40

20道高频React面试题(附答案)

如果该属性是一个回调函数,它将接受底层DOM元素或组件已挂载实例作为其第一个参数。可以组件存储它。...那为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 设计是基于数组实现。调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...mapStateToProps(state,ownProps)带有两个参数,含义是∶state-store管理全局状态对象,所有都组件状态数据都存储对象。...ownProps 组件通过props传入参数。reducer 到组件经历过程:reducer对action对象处理,更新组件状态并将状态返回store。...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数

1.7K10

学习 React Native for Android:React 基础

组件状态通常在组件内部函数 getInitialState() 声明,使用 setState() 函数更新,并通过 this.state.状态名 来获取值。 我们将在下一个练习了解状态使用。...) 操作将 names 数组每个 name 一个个使用 Hello, {name} 形式重新创建,得到一个新数组再返回给 ReactDOM.render() 函数绘制。...往文本框输入名字并点击提交按钮后,页面就会出现相应问候语: 此时调试工具 State 对象也发生了相应变化,name_list 元素会记录下用户输入所有名字。...当点击 NameForm 里 submit 按钮时,就调用这个回调函数并将 name 数据作为参数交给回调函数处理。 代码如下: <!...补遗 本文例子入手,一步步介绍了 JSX 、组件、属性、状态、数据展示、表单处理、复合组件等 React 开发基础概念,在其中存在一些坑和值得深究东西也尽量以扩展练习形式交给读者主动去学习掌握

9.2K20

redux-form学习笔记二--实现表单同步验证

,则提示警告(warn)内容,此时虽然发出警告但仍能提交成功(请区分和2和3区别) 5尚未输入内容时(pristine=true)或在提交过程(submitting=true),禁止使用提交按钮...component,比如以上renderField 2Field组件name属性和component属性 name属性是Filed组件名称,也即Field下输入框名称,它将成为存储form表单数据...SyncValidationFormvalues对象输入后是这样: { username:彭湖湾, email:2314838003@qq.com, age:20 } component属性是.../api/Props.md/ handleSubmit是处理提交一个函数,接收三个参数:values(即上文提到保存表单数据对象),dispatch和props(传递给自定义表单组件属性) pristine...是一个布尔型,如果表单初始化后尚未输入,为true,否则为false,当你向表单第一个输入框输入时候,pristine就由true转为false了 reset是一个函数,调用reset()

1.8K50

高级前端常考react面试题指南_2023-05-19

咱们可以组件添加一个 ref 属性来使用,该属性是一个回调函数,接收作为其第一个参数底层 DOM 元素或组件挂载实例。... React,组件负责控制和管理自己状态。如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...约束性组件( controlled component)就是由 React控制组件,也就是说,表单元素数据存储组件内部状态表单到底呈现什么由组件决定。...如下所示, username没有存储DOM元素内,而是存储组件状态。每次要更新 username时,就要调用 setState更新状态;每次要获取 username,就要获取组件状态。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储组件状态,而是存储表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它

1.7K31

【译】开始学习React - 概览和演示教程

state状态 现在,我们将字符数据存在变量数组并将作为props传递。这是一个很好的开始,但是请想象下,如果我们希望能够数组删除一个项目。...提交表单数据 现在,我们已经将数据存储状态,并且可以状态删除任何项目。但是,如果我们希望能够添加新数据来到状态呢?...,每次表单更改字段时都会更新Form状态,并且我们提交时,所有这些数据将传递到App状态,然后App状态将更新Table。...渲染,让我们state获取两个属性,并将它们分配为正确表单键对应。我们将把handleChange()作为输入onChange运行,最后导出Form组件。...以下代码段,你将看到我们如何Wikipedia API引入数据,并将其显示页面上。

11.1K20

常见react面试题(持续更新

当用户提交表单时,前面提到元素将随表单一起被发送。...容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将作为回调提供给展示组件。容器组件经常是有状态,因为它们是(其它组件)数据源。...那为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 设计是基于数组实现。调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。... React Diff 算法 React 会借助元素 Key 来判断该元素是新近创建还是被移动而来元素,从而减少不必要元素重渲染此外,React 还需要借助 Key 来判断元素与本地状态关联关系...react:包含react所必须核心代码react-dom:react渲染在不同平台所需要核心代码babel:将jsx转换成React代码工具如何将两个或多个组件嵌入到一个组件

2.6K20

受控组件和非受控组件

受控组件 HTML表单元素,它们通常自己维护一套state,并随着用户输入自己进行UI上更新,这种行为是不被我们程序所管控,而如果将Reactstate属性和表单元素建立依赖关系,再通过...React定义了一个input输入框的话,它并没有类似于Vue里v-model这种双向绑定功能,也就是说我们并没有一个指令能够将数据和输入框结合起来,用户输入框输入内容,然后数据同步更新。...而输入框内容取决是inputvalue属性,那么我们可以this.state定义一个名为username属性,并将input上value指定为这个属性。...受控组件,组件渲染出状态与它value或checked prop相对应。 react受控组件更新state流程: 通过初始state设置表单默认。...每当表单发生变化时,调用onChange事件处理器。 事件处理器通过合成对象event拿到改变后状态,并更新应用state。 SetState触发视图重新渲染,完成表单组件更新。

1.5K10
领券