react获取input输入框的单值 以及多值 的方法

react 获取input 输入框的值的多种方式

第一种方式 非受控组件获取
非受控组件获取 ref
import React , {Component} from ‘react’;
export default class App extends Component{
search(){
const inpVal = this.input.value;
console.log(inpVal);
}

render(){
return(

第二种方式 受控组件获取
受控组件 this.setState({})

import React , {Component} from ‘react’;
export default class App extends Component{
constructor(props){
super(props);
this.state = {
inpValu:’’
}
}

handelChange(e){
this.setState({
inpValu:e.target.value
})
}

render(){
return(

) } } nput 输入框的值会随着用户输入的改变而改变，onChange通过对象e拿到改变之后的状态并更新state，setState根据新的状态触发视图渲染，完成更新.

本人目的用于文件下载 --（前端 react+antd ）：

链接地址：https://www.jb51.net/article/208965.htm

react页面中存在多个input时巧妙设置value属性

简单的一个输入框，你就必须要设置changeValue的方法去给input加上，这样你输入的内容才能够正确的展示到UI页面中，也因此，如果你页面中存在多个input时，简直就是噩梦了，因为你首先要为这些所有的input框绑定上onChange的方法，然后还需要在this.state中去设置不同的input对应不同的值，最后还需要在changeValue的方法中去一一监听input输入时去修改对应的input的值，很是麻烦，笔者之前在写一个注册流程的时候被折磨的苦不堪言，最近闲下来可以去优化一下以前的代码，找到了一个可以优化一下changeValue的方法，以前笔者的写法是这样的：

render部分name的名字是和state中的一一对应的。

此处输入框部分是可以单独提取成一个独立的小组件的，这样就不需要每写一个input框就需要绑定一次方法，这样也更符合react官方推荐的做法，不过因为这里不是本文介绍的重点，就没有修改了，着重展示一下修改changeValue的方法，现在是根据input的name名称去一一判断究竟是哪个input，然后将input对应的value值进行修改，但是这样最大的一个问题就是当页面中input多的时候你的changValue方法会非常的繁琐，秉承着所有用到switch方法的地方都能优化的原则，笔者做了一下优化，将changeValue方法改写为：
仅仅改成了三行，而且你无论有多少个input，这个方法是永远不需要去做改变的，唯一需要做到的规范就是state中的属性名要于input中的name名称加以对应，其实这算是对象的属性赋值的另一种写法，因为在对象中Key无法以变量的方式去读取，所以笔者只好将对象单提出来赋值给变量o。。
更简单的方式：
_changeValue(e){
this.setState({
[e.target.name] : e.target.value
})
}

以上纯属个人在实践上碰到的问题，做个记录，，，

https://blog.csdn.net/baidu_38027860/article/details/82801891?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-7.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-7.control