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

如何在react js中获取相同属性名的数组中input标签的值

在React.js中获取相同属性名的数组中input标签的值,可以通过以下步骤实现:

  1. 首先,创建一个React组件,包含一个包含相同属性名的数组。
  2. 在组件的state中定义一个与数组长度相同的状态数组,用于存储每个input标签的值。
  3. 在组件的render方法中,使用map函数遍历数组,并为每个input标签设置一个onChange事件处理函数。
  4. 在onChange事件处理函数中,通过事件对象获取当前input标签的值,并更新状态数组中对应位置的值。
  5. 最后,可以通过访问状态数组来获取每个input标签的值。

以下是一个示例代码:

代码语言:txt
复制
import React, { Component } from 'react';

class InputArray extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValues: Array(props.array.length).fill(''),
    };
  }

  handleInputChange = (index, event) => {
    const { value } = event.target;
    this.setState((prevState) => {
      const inputValues = [...prevState.inputValues];
      inputValues[index] = value;
      return { inputValues };
    });
  };

  render() {
    const { array } = this.props;
    const { inputValues } = this.state;

    return (
      <div>
        {array.map((item, index) => (
          <input
            key={index}
            value={inputValues[index]}
            onChange={(event) => this.handleInputChange(index, event)}
          />
        ))}
      </div>
    );
  }
}

export default InputArray;

在上述示例中,InputArray组件接收一个名为array的属性,该属性是一个包含相同属性名的数组。组件内部使用state来存储每个input标签的值,通过onChange事件处理函数更新状态数组中对应位置的值。最后,通过访问状态数组inputValues来获取每个input标签的值。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。

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

相关·内容

js数组添加数据方式js数组对象添加属性属性

参考:https://www.cnblogs.com/ayaa/p/14732349.html js数组添加数据方式有以下几种: 直接利用数组下标赋值来增加(数组下标起始是0) 例,先存在一个有...(arr);  此时输出结果是[ 1, 2, 3, 5 ]; 通过 数组[数组.length] 来增加 let arr=[1,2,3]; arr[arr.length]=5; console.log...(5,8,9); console.log(arr);  此时输出结果是[ 1, 2, 3, 5, 8, 9 ]; 通过 数组.unshift(参数)来增加从数组第1个数据开始参数,unshift可以带多个参...用 数组.splice(开始插入下标数,0,需要插入参数1,需要插入参数2,需要插入参数3……)来增加数组数据 let arr=[1,2,3]; //splice(第一个必需参数:该参数是开始插入...(3,0,7,8,9) console.log(arr);  此时输出结果是[ 1, 2, 3, 7, 8, 9 ]; 因为举例是从第3个下标开始,所以是直接在数组最后开始增加数组内容; js数组对象添加属性属性

23.3K20

何在 WPF 获取所有已经显式赋过依赖项属性

获取 WPF 依赖项属性时,会依照优先级去各个级别获取。这样,无论你什么时候去获取依赖项属性,都至少是有一个有效。有什么方法可以获取哪些属性被显式赋值过呢?...如果是 CLR 属性,我们可以自己写判断条件,然而依赖项属性没有自己写判断条件地方。 本文介绍如何获取以及显式赋值过依赖项属性。...因此,你不能在这里获取到常规方法获取依赖项属性真实类型。 但是,此枚举拿到所有依赖项属性都是此依赖对象已经赋值过依赖项属性本地。如果没有赋值过,将不会在这里遍历中出现。...本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。...欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://blog.walterlv.com ),不得用于商业目的,基于本文修改后作品务必以相同许可发布。

17140

Js数组对象某个属性升序排序,并指定数组某个对象移动到数组最前面

需求整理:   本篇文章主要实现是将一个数组对象属性通过升序方式排序,然后能够让程序可以指定对应数组对象移动到程序最前面。...: 23},{name: "小芳", Id: 18}];   首先把数组Id通过升序方式排序: //源数组 var arrayData= [{name: "夏明", Id:24}, {name:..., Id: 24 },{ name: "小红", Id: 25 }] 找到Id为23对象,移动到数组最前面去(注意Id唯一): 实现原理:因为移除数组对象需要找到对应数组对象下标索引才能进行移除...,现在我们需要移除Id=23对象,让其排到最前面去(先找到对象下标,然后把给数组对象赋值给temporaryArry临时数组,然后在通过下标移除newArrayData该对象,最后将arrayData...[currentIdx]); //移除数组newArrayId=23对象 newArrayData.splice(currentIdx,1);//从start[一般为对象索引]位置开始向后删除

12.1K20

React】学习笔记(一)——React入门、面向组件编程、函数柯里化

与Html标签同理,必须有头有尾,或者写成自结束标签 ⑦:标签首字母 React中非常讲究细节。...类构造器不是必须写,要对实例进行一些初始化操作,添加指定属性时才写 如果A类继承了B类,且A类写了构造器,那么A类构造器super是必须要调用 类中所定义方法,都放在了类原型对象上...组件标签所有属性都保存在props。通过标签属性从组件外向组件内传递变化数据。组件内部不建议修改props数据,数据更新借助于state。...} 组件里标签可以通过ref属性来标识自己,然后都会收集到类实例refs属性,相当于原生id,但我们拿去方式也不原生document.getElementById,...【复习】对象基本操作:在对象想要拿到某个属性名称需要使用 [ 属性 ] let a = 'name' let obj={} //{name:obj} obj[a]='tom' 我们使用高阶函数来重写编写刚刚需求

5K30

React源码解析之HostComponent更新(上)

prop 相同/新增 prop 并且有 //关于 style 属性更新 if (propKey === STYLE)...//判断目标节点标签是否可以包含子标签 、 等是不能包含子标签 if (voidElementTags[tag]) { //不能包含子标签,报出 error...>、等是不能包含子标签 ② 判断__html设置标签内是否有子节点,:__html:"aaa" ,就会报错 ③ style属性不为null,但不是Object类型的话,报错 ---...- (3) 循环操作老props属性,将需要删除props加入到数组 ① 如果不是删除属性(老props有,新props没有)的话,则跳过,不执行下面代码 ② 如果是删除属性的话,则执行下方代码...,将新增/更新props加入到数组 以下操作是针对新增/更新props ① 如果propKey是style属性的话,循环style对象CSS属性 [1] 如果老styleCSS属性

5.8K30

「大众点评点餐」小程序开发经验 02:视图

wx:for-index:遍历元素下标的变量,默认 index。 以上属性都可以用字符串,但不要使用 - 等符号。...展示结果: 循环遍历时,除官方说明数组类型可以循环遍历外,对象类型也可通过 wx:for 进行属性遍历。此时 for-index 为属性 key 。...小程序模板,只能单向使用传入数据,不像 React 可以利用 props 让父子组件进行传。 我们以单个菜品组件为例,看看如何在小程序中使用模板: 6....它与 HTML 标签类似,基于 Web Component 标准,属性和内容使用方法也和 HTML 标签类似。 组件名称和属性名称,都必须使用小写。 1. 组件列表 2....组件属性 小程序组件,支持以下数据类型: Boolean:布尔 Number:数字 String:字符 Array:数组 Object:对象 EventHandler:事件处理函数名,事件绑定属性

3K30

一天梳理完React面试考察知识点

React 标准化了事件对象,因此在不同浏览器中都会有相同属性。...() 可以接收三个参数,第一个为标签名称,第二参数为属性,第三个参数为内容createElement() 根据首字母大小写来区分是组件还是HTML标签React规定组件首字母必须大写,HTML规定标签首字母必须小写...// 第一个参数为 标签(tag) 可为 'div'标签名 或 List组件// 第二个参数为:属性(props)// 第三个参数之后都为子节点(child),可以在第三个参数传一个数组,也可以在第三、...类型和引用类型区别引用类型本质是相同内存地址,出于性能问题考虑,所以JS对象使用引用类型,为了避免这种情况所以需要深拷贝常见类型:undefined、String、Bool、Symbol('s...,hasOwnProperty()属性只要是继承或者自己拥有的为trueJS 基础 - 作用域和闭包1.this 不同应用场景,如何取值?

3.2K40

React教程(详细版)

js语法,因为浏览器只能识别js),还有就是script标签type需要写成text/babel,因为script标签要写jsx语法,这里再说一点,就是你引入了react-dom库,就可以使用ReactDOM...时不要用引号 标签引入js表达式要用{} 如果在jsx要写行内样式需要使用style={ {coler:red}}形式 样式指定不能写class,要写className; 只有一个根标签 标签必须闭合...refs是组件实例对象属性,它专门用来收集那些打了ref标签dom元 素,比方说,组件input添加了一个ref=“input1”,那么组件实例refs就={input1:input(真实...dom)},这样就可以通过this.refs.input1拿到input标签dom了,就不需要想原生js那样通过添加属性id,然后通过document.getElementById(“id”)方式拿...第一次是将原先实例属性清空,传入是null,第二次再把当前节点传赋值给组件实例input1属性,这个在一般开发过程无关紧要,所以大家知道下有这个情况就可以了,当然它也有解决办法:通过将ref回调函数定义成类绑定函数方式

1.7K20

一天梳理完React所有面试考察知识点

React 标准化了事件对象,因此在不同浏览器中都会有相同属性。...() 可以接收三个参数,第一个为标签名称,第二参数为属性,第三个参数为内容createElement() 根据首字母大小写来区分是组件还是HTML标签React规定组件首字母必须大写,HTML规定标签首字母必须小写...// 第一个参数为 标签(tag) 可为 'div'标签名 或 List组件// 第二个参数为:属性(props)// 第三个参数之后都为子节点(child),可以在第三个参数传一个数组,也可以在第三、...类型和引用类型区别引用类型本质是相同内存地址,出于性能问题考虑,所以JS对象使用引用类型,为了避免这种情况所以需要深拷贝常见类型:undefined、String、Bool、Symbol('s...,hasOwnProperty()属性只要是继承或者自己拥有的为trueJS 基础 - 作用域和闭包1.this 不同应用场景,如何取值?

2.7K30

React组件基础

,建议将图片保存下来直接上传(img-5zo7zriO-1668351209724)(images/组件.png)] React创建组件两种方式 函数组件 函数组件:使用JS函数或者箭头函数创建组件...为了区分普通标签,函数组名称必须大写字母开头 函数组件必须有返回,表示该组件结构 如果返回为null,表示不渲染任何内容 使用函数创建组件 function Hello () {...经常需要操作表单元素,比如获取表单或者是设置表单。...问题:每个表单元素都需要一个单独事件处理程序,处理太繁琐 优化:使用一个事件处理程序处理多个表单元素 步骤 给表单元素添加name属性,名称与state属性相同 根据表单元素类型获取对应 在事件处理程序通过...ref对象添加到文本框 通过ref对象获取文本框 handleClick = () => { console.log

3K20

Vue 2.0 学习总结,精华全在这里了

js 虽然react可以写css-in-js,但是缺乏选择器功能,即便可以在js引入css文件,但还是不方便 vue融合了react和angular优点,并且解决了react和angualr痛点...例如数据都要绑定要data属性,方法都要绑定到methods方法 实例上data和methods里面的key会自动挂载到vue实例上,我们管他们叫动态属性获取方式直接使实例.动态属性 vue实例上实例属性要通过实例...$实例属性获取 在vue实例里面用this,this指向是vue实例 可以通过this.a去获取动态属性 可以通过this....模板语法 就是如何在.vue文件template标签书写内容 {{}}(Mustache语法)里面会按照纯文本输出 v-once指令只会执行一次性地插,当数据改变时,插内容不会更新。...但是过滤器不能用在v-bind,如果想实现相同效果在v-bind我们要用计算属性 ?

3.9K110

React两大组件,三大核心属性,事件处理和函数柯里化

编译后,会开启严格模式,因此函数组this指向undefined 原理 注意 Class类复习 类式组件 原理 组件实例三大核心属性----state属性,和class组件 react事件绑定...,则爆错 ---- 小案例 当我们传递给react数组时,react会自动帮助我们进行遍历操作,给js对象,不好使 区分js语句和js表达式 1.表达式: 一个表达式会产生一个,可以放在任何一个需要地方...; ---- 限制标签里面传递属性类型,非空限制,默认等… 需要引入prop-types.js文件 <!...关键字 speak: PropTypes.func } //指定默认标签属性 //如果标签里面没传对应属性,那么赋予属性默认 Person.defaultProps...大写这个是导入js包后,全局新增一个对象,而Person.propTypes是我们需要给类上添加一个属性react底层会去寻找当前类上名字相同属性,然后进行遍历,设置对应类型限制和默认 -

3.1K10

学习 React Native for Android:React 基础

属性(props):类似 HTML 属性,在绘制时候可以直接在标签添加属性,然后在组件通过 this.props.属性 获取。 状态(state):维护组件内部状态。...组件状态通常在组件内部函数 getInitialState() 声明,使用 setState() 函数更新,并通过 this.state.状态获取值。 我们将在下一个练习了解状态使用。...阅读官方文档有关属性默认 内容,为 word 属性增加一个默认 “Hello World” 。...) 操作将 names 数组每个 name 一个个使用 Hello, {name} 形式重新创建,得到一个新数组再返回给 ReactDOM.render() 函数绘制。...需要格外注意一点是获取输入框内容方式。 我们前面已经说到,组件在插入页面前其实是在虚拟 DOM 表示,因此,在渲染成最终实际 DOM 前,你不能通过直接访问组件内元素来试图获取属性

9.2K20
领券