web-dev-qa-db-fra.com

Utilisation de event.target avec les composants React

J'ai des problèmes avec mon projet. Quelqu'un peut-il m'expliquer pourquoi je ne peux pas utiliser le e.target pour accéder à autre chose que className?

Ci-dessous le code de mon point d’entrée:

import React from 'react'
import ReactDOM from 'react-dom'
import Button from './Button'
import Menu from './Menu'

function test(e){
    console.log(e.target.ref)
 }

module.exports = class Content extends React.Component {
    constructor(props){
        super(props)
        this.state={content: ''}
    }

update(e){
    console.log(e.target.txt)

}

render (){
    return (
        <div id="lower">
            <div id="menu">
               <Menu onClick={this.update.bind(this)}/>
            </div>
            <div id="content">
                {this.state.content}
            </div>
        </div>
    )

  }
}

J'essaie d'accéder au paramètre dans le composant Men, à l'aide de la méthode update. Voir Men ci-dessous:

module.exports = class Menu extends React.Component {

    render (){
       return (
           <div>
               <Button space="home" className="home" txt="Home" onClick={this.props.onClick}/>

        </div>
       )

    }
}

Je veux vraiment savoir pourquoi je peux accéder à la valeur txt et space à l'aide de e.target. J'ai lu la documentation et cherché d'autres sources, mais je n'ai pas encore de réponse, mais j'espère qu'il y a un moyen de le faire.

javascriptreactjs
42
LucyViolet

Le premier argument de la méthode update est SyntheticEvent objet qui contient les propriétés communes et les méthodes de any event , il ne fait pas référence à React composant contenant la propriété props. .

si vous avez besoin de passer l'argument pour mettre à jour la méthode, vous pouvez le faire comme ceci

onClick={ (e) => this.props.onClick(e, 'home', 'Home') }

et récupère ces arguments dans la méthode update

update(e, space, txt){
   console.log(e.target, space, txt);
}

Example

event.target vous donne le DOMNode natif. Vous devez ensuite utiliser les API DOM classiques pour accéder aux attributs. Par exemple getAttribute ou dataset

<button 
  data-space="home" 
  className="home" 
  data-txt="Home" 
  onClick={ this.props.onClick } 
/> 
  Button
</button>

onClick(e) {
   console.log(e.target.dataset.txt, e.target.dataset.space);
}

Example

59
Alexander T.