Je ne peux pas lire l'attribut 'ref' de l'élément dom dans la réaction

Question

Je ne peux pas lire l'attribut ref après la validation du formulaire. Le résultat est undefined et je ne comprends pas pourquoi.

import React from 'react'; 
import {Link} from 'react-router-dom'; 

export default class Home extends React.Component {. 

handleSubmit(e){ 
    e.preventDefault(); 

    console.log(e.name.value); 
} 

render() { 
    return (
     <div> 
      <form onSubmit={this.handleSubmit}> 
       <input type='text' ref={ (input) => this.name = input} /> 
       <input type='text' ref={ (input) => this.topic = input} /> 
       <input type='submit'/> 
      </form> 
     </div> 
    ) 
} 

}

Answer 1

vous stockez dans le composant lui-même, la valeur devrait être disponible sous

console.log(this.name) 

e est l'événement qui se déclenche lorsque vous cliquez sur l'entrée. Dans votre cas, vous utilisez une fonction de flèche, donc this dans le contexte du rappel est le composant Home.

EDIT:

Vous devez également lier handleSubmit afin qu'il ait accès au droit this. Ajouter cela au Home composant:

constructor() { 
    super() 
    this.handleSubmit = this.handleSubmit.bind(this) 
} 

Answer 2

Vous devrez peut-être ouvrir une session this.name.value au lieu de cette console.log(e.name.value);

Vous devez également inclure ce

constructor(props){ 
    super(props) 
    this.handleSubmit = this.handleSubmit.bind(this) 
} 

Answer 3

La variable e organise un événement. Vous recherchez e.target pour obtenir l'élément sur lequel l'événement a été déclenché.

console.log(e.target.name.value);