react 获取多个Input框中的值

最新推荐文章于 2023-10-20 10:38:34 发布

程欢o

最新推荐文章于 2023-10-20 10:38:34 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： javascript reactjs

本文链接：https://blog.youkuaiyun.com/weixin_29947843/article/details/107452752

版权

前端专栏收录该内容

24 篇文章

订阅专栏

在React中，当页面包含大量Input元素时，逐一处理值会导致代码冗余。本文介绍了两种方法来解决这一问题：一是通过name属性动态设置state；二是利用ref获取DOM节点内的值。

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

react 获取多个Input框中的值

假如页面中有很多input需要取值，如果数量少的话，可以一个一个的定义，但是如果数据多的话一个一个的处理，会造成代码冗余，工作量大的问题。

方法1

关键点就是我们传递一下name值，然后去setState里动态设置每个input的值，我们可以在render里边console.log(this.state)看一下，我们的每一项的值就是{name1:”abc”,name2:”def”}

import React,{ Component } from 'react';
class ReplenishData extends Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    showVal(name,e){
        this.setState({
            [name]:e.target.value
        });
    }
    render(){
        console.log(this.state);
        return(
            <div>
                <input type="text" onChange= {this.showVal.bind(this,"name1")} />
                <input type="text" onChange={this.showVal.bind(this,"name2")} />
                <input type="text" onChange={this.showVal.bind(this,"name3")} />
                <input type="text" onChange={this.showVal.bind(this,"name4")} />
                <input type="text" onChange={this.showVal.bind(this,"name5")} />
                <input type="text" onChange={this.showVal.bind(this,"name6")} />
            </div>
        )
    }
}

方法2

使用ref去获取dom节点内的值

import React,{useRef} from 'react'
export default class form_input extends React.Component{
    constructor(){
        super()
        this.usname = useRef()
        this.age = useRef()
    }
    // 获取input DOM节点
    sbmmt(){
        console.log(this.usname.current.value)
        console.log(this.age.current.value)
    }
    render(){
        return(
            <div>
                <hr/>
                  {/*获取input dom 节点  */}
                  <input type="text" ref={this.usname}></input>
                  <input type="text" ref={this.age}></input>
                  <button onClick={this.sbmmt.bind(this)}>提交信息</button>
            </div>
        
            
        )
    }
}