メインコンポーネントのonclickコンポーネントsetState（）

Question

デバイスコンポーネントの現在のDevicename onClickで状態（MainDevicePickerの）を設定しようとしています。

何らかの理由で、onClickハンドラが動作しておらず、console.log（）が表示されていません。

MainDevicePicker.js

import React, { Component } from 'react'; 

import Device from '../Device/Device'; 
import './MainDevicePicker.css'; 

class MainDevicePicker extends Component { 
    constructor(){ 
    super(); 
    this.selectSubDevice = this.selectSubDevice.bind(this); 
    this.state = { 
     device: '', 
    }; 
    } 

    selectSubDevice(e){ 
    e.preventDefault(); 
    console.log('TEST'); 
    this.setState({ 
     device: this.props.name, 
    }) 
    } 

    render() { 
    return (
     <div className="MainDevicePicker"> 
      <Device name="Mac" fa="apple" onClick={this.selectSubDevice}/> 
      <Device name="iPad" fa="apple"/> 
      <Device name="iPhone" fa="apple"/> 
      <Device name="Laptop" fa="windows"/> 
      <Device name="Display" fa="desktop"/> 
     </div> 
    ); 
    } 
} 

export default MainDevicePicker; 

Device.js

import React, {Component} from 'react'; 
import FontAwesome from 'react-fontawesome'; 
import './Device.css'; 

class Device extends Component { 
    render() { 
    return (
     <div className="Device"> 
      <FontAwesome className='DeviceLogo' name={this.props.fa} /> 
      <p className="DeviceName">{this.props.name}</p> 
     </div> 
    ); 
    } 
} 

export default Device; 

Answer 1

あなたは要素をバインドする必要があります。次の例を参照してください

<div className="Device" onClick={this.props.onClick}>

：あなたは、デバイスクラスの小道具として「のonClick」を受け入れ、のようなあなたのdivにそれを通過しなければなりませんデバイス上の

<Device name="Mac" fa="apple" onClick={this.selectSubDevice.bind(this}/> 

：

例としてこれを発射します

return (
    <div className="Device" onClick={this.props.onClick}> 
     <FontAwesome className='DeviceLogo' name={this.props.fa} /> 
     <p className="DeviceName">{this.props.name}</p> 
    </div> 
); 

Answer 2

私はあなたが反応するコンポーネントにonClickイベントを設定することはできませんと思います。 https://pastebin.com/5Dyf1zXC