首页
学习
活动
专区
工具
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.5K20
  • 如何在 WPF 中获取所有已经显式赋过值的依赖项属性

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

    21040

    将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]); //移除数组newArray中Id=23的对象 newArrayData.splice(currentIdx,1);//从start[一般为对象的索引]的位置开始向后删除

    12.3K20

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

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

    5.1K30

    「大众点评点餐」小程序开发经验 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源码解析之HostComponent的更新(上)

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

    5.9K30

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

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

    3.2K40

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

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

    2.8K30

    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.8K20

    React基础

    10.3 元素的key在它的兄弟元素之间应该唯一数组元素中使用的key在其兄弟之间应该是独一无二的。然而,它们不需要是全局唯一的。当我们生成两个不同的数组时,我们可以使用相同的键。...如果你的组件中需要使用和key相同的值,请将其作为属性传递:const content = posts.map((post) => 中读取值得时候,该方法很有用,如:获取表单字段的值和做一些DOM操作。...的 input 元素,并通过 onChange 事件响应更新用户输入的值。14.2 实例2在以下实例中演示如何在子组件上使用表单。...15.1 使用方法绑定一个ref属性到render的返回值上:input ref="myInput" />在其他代码中,通过this.refs来获取支撑实例:var input = this.refs.myInput

    1.3K10

    React组件基础

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

    4K110

    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
    领券