Использование event.target с компонентами React

Question

У меня возникли проблемы с моим проектом. Может ли кто-нибудь объяснить мне, почему я не могу использовать e.target для доступа к чему-либо, кроме className?

Ниже приведен код, с моей точкой входа:

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

    } 
} 

Я пытаюсь получить доступ к настройкам в меню компонента , используя метод update. См меню ниже:

module.exports = class Menu extends React.Component { 

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

     </div> 
     ) 

    } 
} 

Я действительно хочу знать, почему я могу получить доступ к значению txt и space с помощью e.target. Я прочитал документацию и искал другие источники, но у меня пока нет ответа, но я надеюсь, что это можно сделать.

Answer 1

Первый аргумент в update метода является SyntheticEvent объект, который содержит общие свойства и методы к любому event, он не ссылается на React компонент, где есть свойство props.

, если вам нужно передать аргумент для обновления метод, который вы можете сделать это, как этот

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

и получить эти аргументы внутри update метода

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

Example

---

event.target дает вам родной DOMNode, вам необходимо использовать обычные API DOM для доступа к атрибутам. Например getAttribute или 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