ホームページ > 記事 > ウェブフロントエンド > Reactでrefを使用する方法
#このチュートリアルの動作環境: Windows7 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。 推奨: "react で ref を使用する方法: 1. 「export default class UserAdd extends Component{...}」などのコードを使用してコールバック関数の形式で使用します; 2. 文字列形式で使用します。 「export ...」などのコードを使用します。
Javascript 基本チュートリアル"
react で ref を使用する 2 つの方法
ref には 2 種類あります使用方法import React,{Component} from 'react' export default class UserAdd extends Component{ constructor(){ super(); } handleSubmit=()=>{ let name=this.name.value; console.log(name); } render(){ return( <form onSubmit={this.handleSubmit}> <div className="from-group"> <label htmlFor="name">姓名</label> <input type="text" className="form-control" ref={ref=>this.name=ref}/> </div> <div className="from-group"> <input type="submit" className="btn btn-primary"/> </div> </form> ) } }2 番目の文字列形式を使用する場合は、this.refs.string
import React,{Component} from 'react' export default class UserAdd extends Component{ constructor(){ super(); } handleSubmit=()=>{ let name=this.refs.name.value; console.log(name); } render(){ return( <form onSubmit={this.handleSubmit}> <div className="from-group"> <label htmlFor="name">姓名</label> <input type="text" className="form-control" ref="name"/> </div> <div className="from-group"> <input type="submit" className="btn btn-primary"/> </div> </form> ) } }プログラミング関連の知識の詳細については、
プログラミング学習 を参照してください。 !
以上がReactでrefを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。