React之input動(dòng)態(tài)取值和賦值方式
react input動(dòng)態(tài)取值和賦值
需求:對(duì)用戶(hù)在form表單輸入的值提取出來(lái),并且改變setState中的數(shù)據(jù)
1.在constructor中設(shè)置初始值
2.在Input框中定義
如果只有value沒(méi)有onChange事件會(huì)報(bào)錯(cuò),change事件可以關(guān)聯(lián)輸入的值
value = {this.state.name}
onChange ={this.onChange.bind(this) }3.對(duì)onchange事件注冊(cè),然后獲取Input值再對(duì)state賦值
e.target.name
代表你當(dāng)前輸入Input框?qū)?yīng)的Name,如email,password
e.target.value
代表當(dāng)前輸入的值
this.setState({
[e.target.name] : e.target.value
})import React, { Component } from 'react'
class Register extends Component {
// 在構(gòu)造函數(shù)當(dāng)中設(shè)置狀態(tài)
constructor(props){
super(props)
this.state ={
name : '',
email:'',
password:'',
password2:'',
errors:{},//用戶(hù)不合法信息提示
}
}
onChange(e){
// console.log(e.currentTarget.value)
console.log(e.target.name)//(e.target.name代表你當(dāng)前輸入Input框?qū)?yīng)的Name,如email,password
// e.target.value 代表當(dāng)前輸入的值
this.setState({
[e.target.name] : e.target.value
})
}
//提交對(duì)應(yīng)的內(nèi)容
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">注冊(cè)</h1>
<p className="lead text-center">創(chuàng)建新的賬戶(hù)</p>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="form-group">
<input
type="text"
className="form-control form-control-lg"
placeholder="用戶(hù)名"
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全球公認(rèn)頭像, 如果需要有頭像顯示, 請(qǐng)使用在gravatar注冊(cè)的郵箱</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="確認(rèn)密碼"
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框的值
在開(kāi)發(fā)中,我們比較常見(jiàn)的需要獲取input框的值或者對(duì)input框的值判斷是否為空,空的話(huà)給出提示
首先在input框添加一個(gè)onchange事件
<TextArea type="text" ?rows={4} value={reason} onChange={inputChange}/>inputChange里去更新reason的值,reason是input框里的內(nèi)容
function inputChange(e){
? ? ? ? dispatch({
? ? ? ? ? ? type:'buyBackManage/updateState',
? ? ? ? ? ? payload:{
? ? ? ? ? ? ? ? reason:e.target.value
? ? ? ? ? ? },
? ? ? ? });
? ? }給按鈕一個(gè)點(diǎn)擊事件
<Button type="primary" size={'large'} onClick={()=>rebut(reason)}>駁回</Button>rebut是去更改某個(gè)變量的值,我這里是修改rebutTip的值,由原來(lái)的none變成block
function rebut(reason){
? ? ? ? console.log(reason)
? ? ? ? if(reason.length===0)
? ? ? ? {
? ? ? ? ? ? dispatch({
? ? ? ? ? ? ? ? type:'buyBackManage/updateState',
? ? ? ? ? ? ? ? payload:{
? ? ? ? ? ? ? ? ? ? rebutTip:'block'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? console.log('123')
? ? }上面的reason和rebutTip一開(kāi)始在models中設(shè)定了初始值
?rebutTip:'none', ?reason:''
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決
這篇文章主要介紹了Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue2.0在沒(méi)有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒(méi)有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue動(dòng)態(tài)樣式方法實(shí)例總結(jié)
在vue項(xiàng)目中,很多場(chǎng)景要求我們動(dòng)態(tài)改變?cè)氐臉邮?下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具,它的作用是把互相依賴(lài)的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下2018-09-09
Vue獲取初始化數(shù)據(jù)是放在created還是mounted解讀
這篇文章主要介紹了Vue獲取初始化數(shù)據(jù)是放在created還是mounted的問(wèn)題解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03

