Verwenden von event.target mit React-Komponenten

Question

Ich habe Probleme mit meinem Projekt. Kann mir jemand erklären, warum ich die e.target nicht verwenden kann, um auf etwas anderes als className zuzugreifen?

Unten ist der Code von meinem Einstiegspunkt:

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

    } 
} 

ich die Einstellung im Menü Komponente zuzugreifen versuchen, die update Methode. Siehe Menü unter:

module.exports = class Menu extends React.Component { 

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

     </div> 
     ) 

    } 
} 

Ich möchte wirklich wissen, warum ich die txt und space Wert e.target zugreifen können. Ich habe die Dokumentation gelesen und nach anderen Quellen gesucht, aber ich habe noch keine Antwort, aber ich hoffe, dass es einen Weg gibt, wie es gemacht werden kann.

Answer 1

erstes Argument in update Methode ist SyntheticEvent Objekt, das zu jedem event gemeinsame Eigenschaften und die Methoden enthält, ist es nicht Bestandteil zu reagieren, wo es Referenz Eigenschaft ist props.

wenn Sie Argument benötigen passieren Methode aktualisieren können Sie es tun wie dieses

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

und bekommen diese Argumente innerhalb update Methode

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

Example

---

event.target gibt Ihnen der gebürtige DOMNode, dann müssen Sie die regulären DOM-APIs verwenden, um auf Attribute zuzugreifen. Zum Beispiel getAttribute oder 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