如何使React onClick正常工作？ （即使使用箭头功能也不起作用）

Question

即使遵循在此处有关其他问题的建议之后，我似乎仍然无法使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)}/>如果您还没有尝试过