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='username' 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中文網其他相關文章!