react中怎麼取得input的值

react取得input值的方法：1、透過event物件資訊的方式取得input的值，語法如「inputChange(e){...}」；2、使用ref的方式取得input的值，文法如“this.setState({...})”。

本教學操作環境：windows7系統、react17.0.1版本、thinkpad t480電腦。

推薦：《javascript基礎教學》

react 取得input 輸入框的值

第一種方法：透過event物件資訊的方式

第二種方法：使用ref的方式

透過event物件資訊的方式

<input onChange={(e)=>this.inputChange(e)}/>
<button onClick={()=>this.getInputValue} >获取input的值</button>
inputChange(e){
alert(e.target.value)
this.setState({
username:e.target.value
})
}
getInputValue(){
alert(this.state.username)
}

使用ref的方式

<input ref=&#39;username&#39; onChange={()=>this.inputChange()}/>
<button onClick={()=>this.getInputValue()} >获取input的值</button>
inputChange(){
//获取dom节点元素
//1.添加ref属性
//2.使用this.refs.username获取dom节点
let val=this.refs.username.value;
this.setState({
username:val
})
}
getInputValue(){
console.log(this.state.username)
}

使用ref自訂屬性，可以透過this.refs.屬性名稱.value取得內容。

以上是react中怎麼取得input的值的詳細內容。更多資訊請關注PHP中文網其他相關文章！