react input动态取值和赋值
需求：对用户在form表单输入的值提取出来,并且改变setState中的数据
1.在constructor中设置初始值
2.在Input框中定义
如果只有value没有onChange事件会报错,change事件可以关联输入的值
1 2 | value = {this.state.name}onChange ={this.onChange.bind(this) } |
3.对onchange事件注册,然后获取Input值再对state赋值
1 | e.target.name |
代表你当前输入Input框对应的Name,如email,password
1 | e.target.value |
代表当前输入的值
1 2 3 | this.setState({ [e.target.name] : e.target.value}) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 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> {/* {user ? user.name : null} */} <div> <div> <div> <h1>注册</h1> <p>创建新的账户</p> <div> </div> <div> <small>我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱</small> </div> <div> </div> <div> </div> </div> </div> </div> </div> ) }}export default Register; |
react获取input框的值
在开发中，我们比较常见的需要获取input框的值或者对input框的值判断是否为空，空的话给出提示
首先在input框添加一个onchange事件
1 | <textarea></textarea> |
inputChange里去更新reason的值，reason是input框里的内容
1 2 3 4 5 6 7 8 | function inputChange(e){ dispatch({ type:'buyBackManage/updateState', payload:{ reason:e.target.value }, }); } |
给按钮一个点击事件
1 | <button type="primary">rebut(reason)}>驳回</button> |
rebut是去更改某个变量的值，我这里是修改rebutTip的值，由原来的none变成block
1 2 3 4 5 6 7 8 9 10 11 12 13 | function rebut(reason){ console.log(reason) if(reason.length===0) { dispatch({ type:'buyBackManage/updateState', payload:{ rebutTip:'block' }, }); } console.log('123') } |
上面的reason和rebutTip一开始在models中设定了初始值
1 2 | rebutTip:'none', reason:'' |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
