首頁 > web前端 > js教程 > 主體

react中ref怎麼用

藏色散人
發布: 2020-11-30 11:05:01
原創
2312 人瀏覽過

react中ref的使用方法:1、透過回呼函數形式進行使用,程式碼如「export default class UserAdd extends Component{...}」;2、透過string形式進行使用,程式碼如「export ……」。

react中ref怎麼用

本教學操作環境:Windows7系統、react16版,此方法適用於所有品牌電腦。

推薦:《javascript基礎教學

react中ref的兩種使用方法

ref一共有兩種使用方式

  • 回呼函數形式(官方推薦)

  • #string形式

第一種回呼函數形式

回呼函數形式一共有三種觸發方式

元件渲染後

元件卸載後

ref改變後

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>
        )
    }
 
}
登入後複製

 第二種字串的形式使用時用this.refs.string

import React,{Component} from &#39;react&#39;
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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板