どのようにonClickを動作させるには？ （でも、矢印機能では動作しません）

Question

でもSO上、ここで他の質問で見つかったアドバイスに従った後、私はまだのonClick機能this.changeContentが正しく動作するように見えることはできません。

import React from 'react'; 
import Maxim from './Maxim'; 
import Challenge from './Challenge'; 
import Prompt from './Prompt'; 

class ContentContainer extends React.Component { 
    constructor() { 
     super(); 
     this.changeContent = this.changeContent.bind(this); 
     this.state = { 
      content: "maxim" 
     } 
    } 

    changeContent(event) { 
     console.log(this); 
     if (this.state.content == "maxim") { 
      this.setState({ content: "challenge" }) 
     } else { 
      this.setState({ content: "maxim" }) 
     } 
    } 

    render() { 
     let renderedContent = null; 

     if (this.state.content == "challenge") { 
      renderedContent = <Challenge content="The trick to presence is to listen to the space between the sounds." />; 
     } else { 
      renderedContent = <Maxim quote="Silence can be heard in every sound. All you need is to listen." />; 
     } 
      return (
       <div className="content-container"> 
        {renderedContent} 
        <Prompt onClick={this.changeContent}/> 
       </div> 
      ); 
    } 
} 

export default ContentContainer; 

私はしましたbind、矢印関数（ここでのように）、単純な関数の参照を使用して試してみました...私はSOや他の場所でここで見てきたほとんど全ての変種です。私はもともとちょうどthis.changeContent()を持っていて、関数はページの読み込み時に呼び出されていました。私は少なくともそれを修正しましたが、関数はまだ呼び出されません。this.state.contentも変更されず、コンソールログthisも呼び出されません。

ありがとうございます。

Answer 1

チェックこの実施例を、それが動作する同様の方法でそれを書く：

class ContentContainer extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     this.changeContent = this.changeContent.bind(this); 
 
     this.state = { 
 
      content: "maxim" 
 
     } 
 
    } 
 

 
    changeContent(event) { 
 
     let content = this.state.content; 
 
     this.setState({ content: content == "challenge" ? "maxim" : "challenge"}) 
 
    } 
 

 
    render() { 
 
     let renderedContent = null; 
 

 
     if (this.state.content == "challenge") { 
 
      renderedContent = <Challenge content="The trick to presence is to listen to the space between the sounds." />; 
 
     } else { 
 
      renderedContent = <Maxim quote="Silence can be heard in every sound. All you need is to listen." />; 
 
     } 
 
     return (
 
      <div className="content-container"> 
 
       {renderedContent} 
 
       <Prompt onClick={this.changeContent}/> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
class Challenge extends React.Component{ 
 
    render(){ 
 
    return(
 
     <div>Inside Challenge<br/>{this.props.content}</div> 
 
    ) 
 
    } 
 
} 
 

 
class Maxim extends React.Component{ 
 
    render(){ 
 
    return(
 
     <div>Inside Maxim<br/>{this.props.quote}</div> 
 
    ) 
 
    } 
 
} 
 

 
class Prompt extends React.Component{ 
 
    render(){ 
 
    return(
 
     <div style={{paddingTop: '100px'}}> 
 
      Inside Prompt<br/> 
 
      <span onClick={()=>this.props.onClick()}>*Click Me to change the Component</span> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<ContentContainer/>, document.getElementById('app'))

<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='app'/>

Answer 2

<Prompt onClick={this.changeContent.bind(this)}/> すでに