Utilizzo di event.target con componenti React

Question

Ho qualche problema con il mio progetto. Qualcuno può spiegarmi perché non posso usare lo e.target per accedere a qualcosa di diverso da className?

Di seguito si riporta il codice dal mio punto di ingresso:

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

    } 
} 

Sto cercando di accedere all'impostazione nel menu componente , utilizzando il metodo update. Vedere Menu di seguito:

module.exports = class Menu extends React.Component { 

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

     </div> 
     ) 

    } 
} 

voglio davvero sapere perché posso accedere al valore txt e space utilizzando e.target. Ho letto la documentazione e ho cercato altre fonti, ma non ho ancora risposte, ma spero che possa essere fatto in un modo.

Answer 1

primo argomento update metodo è SyntheticEvent oggetto che contiene proprietà e metodi comuni a qualsiasi event, non viene riferimento reagire componente dove c'è struttura props.

se è necessario passare argomento di aggiornare il metodo si può fare in questo modo

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

e ottenere questi argomenti all'interno update metodo

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

Example

---

event.target ti dà il nativo DOMNode, quindi è necessario utilizzare le normali API DOM per accedere agli attributi. Per esempio getAttribute o 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