react 컴포넌트와 함께 event.target 사용

react 컴포넌트와 함께 event.target 사용

나는 내 프로젝트에 좀 어려움을 겪고 있다.내가 왜 이 장치를 사용할 수 없는지 설명해 줄 사람?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>
    )

  }
}

[ Menu ]컴포넌트의 설정에 액세스하려고 합니다.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문서를 읽고 다른 출처를 찾았지만 아직 답변은 없지만 방법이 있었으면 합니다.

의 첫 번째 인수updatemethod는 any에 대한 공통 속성 및 메서드를 포함하는 개체이며 속성이 있는 경우 React 구성 요소를 참조하지 않습니다.props.

메서드를 업데이트하기 위해 pass 인수가 필요한 경우 다음과 같이 할 수 있습니다.

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

그리고 이 논쟁들을 안에 넣고update방법

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

Example

---

event.target네이티브를 제공DOMNode그 후 일반 DOM API를 사용하여 Atribut에 액세스해야 합니다.예를 들어.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

언급URL : https://stackoverflow.com/questions/37639122/using-event-target-with-react-components