如何实现React中input元素的动态取值与赋值功能？

本文共计768个文字，预计阅读时间需要4分钟。

目录 + React + Input 动态取值与赋值 + React 获取 Input 框的值 + 总结 + React 动态取值与赋值 + 需求：获取用户在表单输入的值，并修改 setState 中的数据 + 1. 在 constructor 中设置初始值 + 2. 在 Input 框中

目录

• 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中设定了初始值

 rebutTip:'none',  reason:''

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。