Java Script Callback Funktion

Question

Für den Zugriff auf React Element oder Komponente ist 'ref' die bestmögliche Methode? Haben wir noch andere Optionen für das gleiche in ReactJS

<TextField 
    ref={(elem) => this.textField = elem} 
    value={value} 
    {...restProps} 
/> 

Answer 1

Wenn Sie den tatsächlichen DOM-Knoten zugreifen mögen, dann ist ref die einzige Option. Im Allgemeinen werden ref s verwendet, um unkontrollierte Komponenten zu erstellen, wobei wir dem DOM erlauben, den Wert der Eingabe zu behalten und den Wert von unserer Referenz zu dem DOM-Knoten zu erhalten, wenn wir ihn brauchen. Sie können nicht als Stütze auf diesen Komponenten verwenden value, aber Sie defaultValue verwenden können ihren Anfangswert zu setzen:

class WithUncontrolledTextInput extends React.Component { 
    constructor() { 
    super(); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    console.log(`The input value is ${this.textField.value}`); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <input ref={input => this.textField = input} defaultValue='hello' /> 
     <input type='submit' value='Submit' /> 
     </form> 
    ); 
    } 
} 

Der alternative Ansatz ist es, eine gesteuerte Komponente zu verwenden, wobei der aktuelle Wert des Eingangs gespeichert innerhalb des Status der Komponente und aktualisiert, wenn der Eingabewert aktualisiert wird.

class WithControlledTextInput extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     textField: 'hello' 
    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleInput = this.handleInput.bind(this); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    console.log(`The input value is ${this.state.textField}`); 
    } 

    handleInput(e) { 
    this.setState({ 
     textField: e.target.value 
    }); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <input value={this.state.textField} onChange={this.handleInput} /> 
     <input type='submit' value='Submit' /> 
     </form> 
    ); 
    } 
}