- Reactでクリックされた要素のIDを検出できますか？

Question

メニューアイテムがクリックされたときに、同じイベントハンドラを使用したいと考えています。

バニラのJavaScriptでは、イベントハンドラ 'this'の値が要素を指しています。this.idを使用すると、これはReactでどのように行われますか。

clickHandler2 and clickHandler3私は1つのイベントハンドラにしたいと思います。異なるのは、クリックされた要素だけです。

コードは以下の通りです：

import React from 'react'; 
import $ from 'jquery'; 

class MobileMenu extends React.Component { 
    constructor (props) { 
    super(props); 
    this.clickHandler1 = this.clickHandler1.bind(this); 
    this.clickHandler2 = this.clickHandler2.bind(this); 
    this.clickHandler3 = this.clickHandler3.bind(this); 
    this.state = { 
     current_item: 'nav_fave' 
     previous_item: null 
    }; 
    } 

    clickHandler1() { 
    this.toggleMenu(); 
    } 

    clickHandler2() { 
    // MenuPage.flip('fave'); 
    this.toggleMenu(); 
    this.toggleMarker($A.el('#nav_fave')); 
    } 

    clickHandler3() { 
    // MenuPage.flip('splash'); 
    this.toggleMenu(); 
    this.toggleMarker($A.el('#nav_splash')); 
    } 

    toggleMarker (current_item) { 

    this.setState({ 
     current_item: current_item 
    }); 

    if ((this.previous_item !== undefined) && (this.previous_item !== current_item)) { 
     this.previous_item.style.borderBottom = ''; 
    } 
    if (this.previous_item !== current_item) { 
     current_item.style.borderBottom = '3px solid #31baed'; 
    } 
    this.previous_item = current_item; 
    } 

    toggleMenu() { 
    if (window.getComputedStyle($A.el('#top_menu_list'), null).display === 'block') { 
     $('#icon_bars').toggleClass('active'); 
     $('#top_menu').slideToggle(); 
    } 
    } 
    // ... snip 
} 

export default MobileMenu 

Answer 1

あなたはイベントパラメータを渡すと、そのtargetプロパティを使用することができます。

clickHandler2 (e) { 
    var id = e.target.id; 
} 

あなたのケースでthisは仕方によってclassそれが自己です。

例：

class App extends React.Component{ 
 
constructor(props){ 
 
    super(props); 
 
    
 
    this.handleChange = this.handleChange.bind(this); 
 
} 
 

 

 
handleChange(e){ 
 
    const {id, value} = e.target; 
 
    console.log('id is - ' + id + ' and the value is: ' + value); 
 
} 
 

 
    render(){ 
 
    return(
 
    <div> 
 
    <input id="input1" placeholder="type something" onChange={this.handleChange} /> 
 
    </div> 
 
     
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>