So verwenden Sie ref in reagieren-js-Tutorial-php.cn

So verwenden Sie ref in reagieren

藏色散人

Freigeben： 2020-11-30 11:05:01

Original

2323 Leute haben es durchsucht

So verwenden Sie ref in React: 1. Verwenden Sie es in Form einer Rückruffunktion, der Code lautet wie „export default class UserAdd erweitert Component{...}“ 2. Verwenden Sie es in String-Form, der Code lautet wie „exportieren...“ .

So verwenden Sie ref in reagieren

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React16-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „Basic JavaScript Tutorial“

Zwei Möglichkeiten, ref in React zu verwenden

ref Es gibt zwei Möglichkeiten, ref zu verwenden

Rückruffunktionsform (offizielle Empfehlung)
Stringform

Das erste Rückruffunktionsformular

Es gibt drei Auslösemethoden für das Rückruffunktionsformular

Nachdem die Komponente gerendert wurde

Nachdem die Komponente entladen wurde

Nachdem die Referenz geändert wurde

import React,{Component} from &#39;react&#39;
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>
        )
    }
 
}

Nach dem Login kopieren

Verwenden Sie diese Methode, wenn Sie die zweite verwenden Zeichenfolgenform. 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>
        )
    }
 
}

Nach dem Login kopieren

Weitere Programmierkenntnisse finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ref in reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!