ホームページ > ウェブフロントエンド > jsチュートリアル > Reactで入力の値を取得する方法

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

藏色散人
リリース: 2023-01-04 09:36:40
オリジナル
10981 人が閲覧しました

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

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

#このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート