React bileşenleri ile event.target kullanma

Question

Projemle ilgili bir sorun yaşıyorum. className'dan başka bir şeye erişmek için neden e.target'u kullanamadığımı bana açıklayabilir misiniz? Ben update yöntemi kullanarak, Menü bileşende ayara erişmek çalışıyorum

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

    } 
} 

:

Aşağıda benim giriş noktasından kodudur. Ben e.target kullanarak txt ve space değerini erişebilir Gerçekten neden istiyor

module.exports = class Menu extends React.Component { 

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

     </div> 
     ) 

    } 
} 

bilmek: Aşağıdaki Menü bakınız. Belgeleri okudum ve diğer kaynakları aradım ama henüz bir cevabım yok, ama bir şekilde yapılabileceğini umuyorum. update yöntemde

Answer 1

Birinci parametre herhangi event ortak özellikleri ve yöntemleri içerir SyntheticEvent amacı, özelliği props olduğu yerde bileşen tepkimeye referans olmamasıdır. Eğer yöntemlerini güncellemeleri için argüman geçmesi gerekiyorsa

bu

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

gibi yapmak ve

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

Example

---

event.target verir update yöntemin içinde bu argümanları alabilirsiniz yerli DOMNode, daha sonra niteliklere erişmek için normal DOM API'lerini kullanmanız gerekir. Örneğin getAttribute veya 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); 
} 

için Example