当前位置： 移动技术网 > IT编程>开发语言>Jquery > 关于React处理input的方法和多个input共用一个方法（不用jQuery）

关于React处理input的方法和多个input共用一个方法（不用jQuery）

2020年07月12日  | 移动技术网IT编程  | 我要评论

关于React处理input的方法和多个input共用一个方法（不用jQuery）

前言： 笔者目前是一家公司的前端实习生，由于公司要求，前端使用的是React框架，而且不使用jQuery，由于以前在校的时候没有开发经验，加上对react也没有了解过，实习遇到的大大小小的问题也不少，期间不断的面向百度，和CSDN编程，在这里把开发遇到的问题以及解决方法和大家分享一下。（新手编程，存在错误望大佬纠正）

React处理单个input的方法

在React开发当中，由于React的特性，对input进行处理时往往要给它一个value然后还得使用onChange方法去setstate它的状态，处理常规单个input如下

                    <input
                    placeholder = '----------请输入--------'
                    onChange = {this._onInput1}
                    value = {this.state.input1}//给个value让他变为可控
                    >
                    </input>

给inpu一个value和onChange方法让他可控

    _onInput1 = (event) =>{
        this.state.input1 = event.target.value//这里获取input里输入的值value
        this.setState(this.state)//更新state
        console.log('这里',this.state.input1)
    }

这里在它的onchange方法里 先通过 target获取输入框value的值 再进行setstate方法改变state的状态
这里的this.state还需要初始化一下，效果如下
在这里插入图片描述
笔者在工作中遇到了 有很多个input的情况 一个一个去setstate虽然也可以 但是代码量很大，通过不断的查找资料发现了几个适用的方法

处理多个input时的方法一

这个方法比较笨重但也是可行的 其中利用了switch函数当然if也可以来对比是哪一个input

              <input
                    placeholder = '----------请输入--------'
                    onChange = {this._onInput2.bind(this,1)}
                    value = {this.state.inputone}//给个value让他变为可控
                    >
                    </input>
                    <input
                    placeholder = '----------请输入--------'
                    onChange = {this._onInput2.bind(this,2)}
                    value = {this.state.inputtwo}//给个value让他变为可控
                    >
                    </input>

这里需要给onchange的方法里传参数去判断是哪一个input

    _onInput2 = (type,event) =>{//第一个是传过来的参数第二个是event
        switch (type){
            case 1:
                this.state.inputone = event.target.value//这里获取input里输入的值value
                this.setState(this.state)//更新state
                console.log('第一个',this.state.inputone)
            break;
            case 2:
                this.state.inputtwo = event.target.value//这里获取input里输入的值value
                this.setState(this.state)//更新state
                console.log('第二个',this.state.inputtwo)
            break;
        }
    }

onchange方法基本上换汤不换药，只是多个一个判断，这个方法也是过于繁琐 还有

React处理多个input方法二（最优）

这个方法的重点在于给每一个input都设置一个name 唯一属性，切记 name设置的必须和value一样

                    <input
                    placeholder = '----------请输入--------'
                    onChange = {this._onInput3}
                    name = 'inputs'//注意必须和value的一样
                    value = {this.state.inputs}//给个value让他变为可控
                    >
                    </input>
                    <input
                    placeholder = '----------请输入--------'
                    onChange = {this._onInput3}
                    name = 'inputa'//注意必须和value的一样
                    value = {this.state.inputa}//给个value让他变为可控
                    >
                    </input>

这是它的方法

    _onInput3 =(event)=>{
        this.state.inp[event.target.name] = event.target.value//通过name来确定是哪一个value
        this.setState(this.state)
        console.log('都在这里',this.state.inp)
    }

这里如果你是做一个搜索的操作时候尽量加一个空 因为如果 this.state.xxx = 'defined’的话会变为不可控状态会报错，这种情况就是 给 this.state.xxx || ""就可以了
这种方法就大大的节约了代码量 在react里实现不用jquery处理多个input的操作
结语：实习生小白，如果有写得不对的或者还有更好的方法欢迎评论留言谢谢大家

本文地址：https://blog.csdn.net/weixin_45872877/article/details/107287625

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网