React之input动态取值和赋值方式

Laila ·

更新时间:2024-09-20

· 1932 次阅读

react input动态取值和赋值

react获取input框的值

总结

react input动态取值和赋值

需求：对用户在form表单输入的值提取出来,并且改变setState中的数据

1.在constructor中设置初始值

2.在Input框中定义

如果只有value没有onChange事件会报错,change事件可以关联输入的值

value = {this.state.name}
onChange ={this.onChange.bind(this) }

3.对onchange事件注册,然后获取Input值再对state赋值

e.target.name

代表你当前输入Input框对应的Name,如email,password

e.target.value

代表当前输入的值

 
    this.setState({
      [e.target.name] : e.target.value
    })

import React, { Component } from 'react'
class Register extends Component {
  // 在构造函数当中设置状态
  constructor(props){
    super(props)
    this.state ={
      name : '',
      email:'',
      password:'',
      password2:'',
      errors:{},//用户不合法信息提示
    }
  }
  onChange(e){
    // console.log(e.currentTarget.value)
    console.log(e.target.name)//(e.target.name代表你当前输入Input框对应的Name,如email,password
    // e.target.value 代表当前输入的值
    this.setState({
      [e.target.name] : e.target.value
    })
  }
 //提交对应的内容
  onSubmit(e){
    e.preventDefault()
    const newUser = {
      name : this.state.name,
      email:this.state.email,
      password:this.state.password,
      password2:this.state.password2,
    }
    console.log(newUser)
  } 
  render() {
    return (
      <div className="register">
        {/* {user ? user.name : null} */}
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">注册</h1>
              <p className="lead text-center">创建新的账户</p>
              <form onSubmit={this.onSubmit.bind(this)}>
                <div className="form-group">
                  <input
                    type="text"
                    className="form-control form-control-lg"
                    placeholder="用户名"
                    name="name"
                    value = {this.state.name}
                    onChange ={this.onChange.bind(this) }
                  />
                </div>
                <div className="form-group">
                  <input
                    type="email"
                    className='form-control form-control-lg'
                    placeholder="邮箱地址"
                    name="email"
                    value = {this.state.email}
                    onChange ={this.onChange.bind(this) }
                    />
                  <small className="form-text text-muted">我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱</small>
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    className='form-control form-control-lg'
                    placeholder="密码"
                    name="password"
                    value = {this.state.password}
                    onChange ={this.onChange.bind(this) }
                  />
                </div>
                <div className="form-group">
                  <input type="password"  
                    className='form-control form-control-lg'  
                    placeholder="确认密码"  
                    name="password2" 
                    value = {this.state.password2}
                    onChange ={this.onChange.bind(this) }
                     />
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
export default Register;

react获取input框的值

在开发中，我们比较常见的需要获取input框的值或者对input框的值判断是否为空，空的话给出提示

首先在input框添加一个onchange事件

<TextArea type="text" rows={4} value={reason} onChange={inputChange}/>

inputChange里去更新reason的值，reason是input框里的内容

function inputChange(e){
        dispatch({
            type:'buyBackManage/updateState',
            payload:{
                reason:e.target.value
            },
        });
    }

给按钮一个点击事件

<Button type="primary" size={'large'} onClick={()=>rebut(reason)}>驳回</Button>

rebut是去更改某个变量的值，我这里是修改rebutTip的值，由原来的none变成block

function rebut(reason){
        console.log(reason)
        if(reason.length===0)
        {
            dispatch({
                type:'buyBackManage/updateState',
                payload:{
                    rebutTip:'block'
                },
            });
        }
        console.log('123')
    }

上面的reason和rebutTip一开始在models中设定了初始值