Reactで入力の値を取得する方法

入力値を取得するための React メソッド: 1. "inputChange(e){...}" などの構文を使用して、イベント オブジェクト情報から入力値を取得します。 2. ref を使用して入力値を取得します。 、構文は「this.setState({...})」などです。

#このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、thinkpad t480 コンピューター。

おすすめ: "

javascript 基本チュートリアル"

react 入力ボックスの値を取得する

最初の方法:イベントオブジェクト情報の取得方法

2つ目：refを利用する方法

イベントオブジェクト情報の取得方法

<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.property name.value を通じてコン​​テンツを取得できます。

以上がReactで入力の値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。