So verwenden Sie ref in reagieren

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...“ .

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 '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>
        )
    }
 
}

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

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!