如何獲得React 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)}/> 試試這個，如果你還沒有