zoukankan      html  css  js  c++  java
  • react input用同一个方法获取不同输入框的值的方法

    react中表单要获取用户输入的各个不同的input框的输入值一般都是每个输入框定义一个方法,如果输入框多的话要定义很多方法,这种比较雍余,现在

    可以利用es6的方法将每个输入框的方法同一一个方法,从而获取不同输入框的值,代码如下:

    class Login extends React.Component{
    constructor (props){
    super(props);
    this.state = {
    username:'',
    password:'',
    }
    }
    这是登录需要输入表单的用户名和密码,
    <input type="text"
    name = 'username'
    className="form-control"
    placeholder="请输入用户名"
    onChange={e =>this.onInputChange(e)}
    />
    <input type="password"
    name = 'password'
    className="form-control"
    placeholder="请输入密码"
    onChange={e =>this.onInputChange(e)}
    />
    在这里密码和用户名输入框采用同一个方法这里,值不过在input框中各自定义一个name属性,分别表示username、password这样在方法onInputChange中inputName就是
    分别是state中的username、password这样就节约了很多代码,es中变量名可以是个变量用中括号包起来这样就能分别代表各input框中的变量了
    onInputChange(e){
    //es6变量名是一个变量
    let inputValue = e.target.value,
    inputName = e.target.name
    this.setState({
    [inputName]:inputValue
    })
    }
     
     
  • 相关阅读:
    第二冲刺阶段第十四天
    第二冲刺阶段第十三天
    第二冲刺阶段第十二天
    第二冲刺阶段第十一天
    典型用户分析
    课后作业——搜狗输入法
    spring第二冲刺阶段第十五天
    spring第二冲刺阶段第十四天
    spring第二冲刺阶段第十三天
    spring第二冲刺阶段第十二天
  • 原文地址:https://www.cnblogs.com/zhx119/p/10936766.html
Copyright © 2011-2022 走看看