Heim > Web-Frontend > js-Tutorial > So erhalten Sie den Wert der Eingabe in React

So erhalten Sie den Wert der Eingabe in React

藏色散人
Freigeben: 2023-01-04 09:36:40
Original
10983 Leute haben es durchsucht

react获取input值的方法:1、通过event对象信息的方式获取input的值,语法如“inputChange(e){...}”;2、使用ref的方式获取input的值,语法如“this.setState({...})”。

So erhalten Sie den Wert der Eingabe in React

本教程操作环境: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)
}
Nach dem Login kopieren

使用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)
}
Nach dem Login kopieren

使用ref自定义一个属性,可以通过this.refs.属性名称.value获取内容。

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Wert der Eingabe in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage