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

笨笨吖

react input动态取值和赋值

需求：对用户在form表单输入的值提取出来,并且改变setState中的数据
1.在constructor中设置初始值
2.在Input框中定义
如果只有value没有onChange事件会报错,change事件可以关联输入的值

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

复制代码

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

1. e.target.name

复制代码

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

1. e.target.value

复制代码

代表当前输入的值

1. 
   
2.     this.setState({
   
3.       [e.target.name] : e.target.value
   
4.     })

复制代码

1. import React, { Component } from 'react'
   
2. class Register extends Component {
   
3.   // 在构造函数当中设置状态
   
4.   constructor(props){
   
5.     super(props)
   
6.     this.state ={
   
7.       name : '',
   
8.       email:'',
   
9.       password:'',
   
10.       password2:'',
    
11.       errors:{},//用户不合法信息提示
    
12.     }
    
13.   }
    
14.   onChange(e){
    
15.     // console.log(e.currentTarget.value)
    
16.     console.log(e.target.name)//(e.target.name代表你当前输入Input框对应的Name,如email,password
    
17.     // e.target.value 代表当前输入的值
    
18.     this.setState({
    
19.       [e.target.name] : e.target.value
    
20.     })
    
21.   }
    
22. //提交对应的内容
    
23.   onSubmit(e){
    
24.     e.preventDefault()
    
25.     const newUser = {
    
26.       name : this.state.name,
    
27.       email:this.state.email,
    
28.       password:this.state.password,
    
29.       password2:this.state.password2,
    
30.     }
    
31.     console.log(newUser)
    
32.   }
    
33.   render() {
    
34.     return (
    
35.       <div className="register">
    
36.         {/* {user ? user.name : null} */}
    
37.         <div className="container">
    
38.           <div className="row">
    
39.             <div className="col-md-8 m-auto">
    
40.               <h1 className="display-4 text-center">注册</h1>
    
41.               <p className="lead text-center">创建新的账户</p>
    
42.               <form onSubmit={this.onSubmit.bind(this)}>
    
43.                 <div className="form-group">
    
44.                   <input
    
45.                     type="text"
    
46.                     className="form-control form-control-lg"
    
47.                     placeholder="用户名"
    
48.                     name="name"
    
49.                     value = {this.state.name}
    
50.                     onChange ={this.onChange.bind(this) }
    
51.                   />
    
52.                 </div>
    
53.                 <div className="form-group">
    
54.                   <input
    
55.                     type="email"
    
56.                     className='form-control form-control-lg'
    
57.                     placeholder="邮箱地址"
    
58.                     name="email"
    
59.                     value = {this.state.email}
    
60.                     onChange ={this.onChange.bind(this) }
    
61.                     />
    
62.                   <small className="form-text text-muted">我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱</small>
    
63.                 </div>
    
64.                 <div className="form-group">
    
65.                   <input
    
66.                     type="password"
    
67.                     className='form-control form-control-lg'
    
68.                     placeholder="密码"
    
69.                     name="password"
    
70.                     value = {this.state.password}
    
71.                     onChange ={this.onChange.bind(this) }
    
72.                   />
    
73.                 </div>
    
74.                 <div className="form-group">
    
75.                   <input type="password"  
    
76.                     className='form-control form-control-lg'  
    
77.                     placeholder="确认密码"  
    
78.                     name="password2"
    
79.                     value = {this.state.password2}
    
80.                     onChange ={this.onChange.bind(this) }
    
81.                      />
    
82.                 </div>
    
83.                 <input type="submit" className="btn btn-info btn-block mt-4" />
    
84.               </form>
    
85.             </div>
    
86.           </div>
    
87.         </div>
    
88.       </div >
    
89.     )
    
90.   }
    
91. }
    
92. export default Register;

复制代码

react获取input框的值

在开发中，我们比较常见的需要获取input框的值或者对input框的值判断是否为空，空的话给出提示
首先在input框添加一个onchange事件

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

复制代码

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

1. function inputChange(e){
   
2.         dispatch({
   
3.             type:'buyBackManage/updateState',
   
4.             payload:{
   
5.                 reason:e.target.value
   
6.             },
   
7.         });
   
8.     }

复制代码

给按钮一个点击事件

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

复制代码

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

1. function rebut(reason){
   
2.         console.log(reason)
   
3.         if(reason.length===0)
   
4.         {
   
5.             dispatch({
   
6.                 type:'buyBackManage/updateState',
   
7.                 payload:{
   
8.                     rebutTip:'block'
   
9.                 },
   
10.             });
    
11.         }
    
12.         console.log('123')
    
13.     }

复制代码

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

1.  rebutTip:'none',
   
2.  reason:''

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/article/284029.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！