React按钮onClick正确绑定，但不起作用

Question

在呈现DOM时，react组件中的按钮不提供onClick中的功能。检查元素显示按钮元素的属性有f noop（）

我的功能在哪里？

我正在制作一个单页的React网页，它使用react-router，react-bootstrap，react-transition-group，CSSTransition和TransitionGroup。对于我的一个页面，我尝试包含Facebook的社交插件，我想创建一个更改状态以显示插件的按钮。

我试着在没有facebook SDK和JSX的情况下渲染按钮，但它没有改变任何东西。下面，定义了this.plugin，但我删除了下面的代码片段，因为它是Facebook的插件JSX。

class WorkShop extends Component{

state={
    displayPlugin: false
}
displayContent = () => {
    this.setState(prevState=>({
        displayPlugin: !prevState.displayPlugin
    }))
} 
render(){
    return(
        <div className="component-pages">
            <div className="home-div">

                <Container>
                    <Row>
                        <Col md={12}>
                            <div>{this.state.displayPlugin ? this.plugin : null}</div>
                            <button type="button" onClick={this.displayContent}>{this.state.displayPlugin ? "Close Events": "Show Events"}</button>
                        </Col>
                    </Row>
                </Container>

包装器App组件：

const App = ()=>{
    return(


            <Router>
                <Route render={({location})=>(
                    <div className="global-div">

                        <MainNav location={location}/>
                        <TransitionGroup>
                            <CSSTransition
                            key={location.key}
                            timeout={900}
                            classNames="fade"
                            >
                                <Switch location={location}>
                                    <Route exact path="/" component={Home}/>
                                    <Route exact path="/workshops" component={WorkShop}/>
                                    <Route exact path="/products" component={Products}/>
                                    <Route exact path="/about" component={About}/>
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    </div>
                )}/>
            </Router>
    )
}

export default App```

Answer 1

问题出现在我的两个div中，我在其他组件中使用了classNames。不太清楚为什么会禁用我的onClick处理程序，但它删除了那些div后它确实修复了。

<div className="component-pages">
   <div className="home-div">

Answer 2

需要将此与事件绑定。见下面的工作代码。

class WorkShop extends Component {

  state = {
    displayPlugin: false
  }

  displayContent = () => {
    this.setState(prevState => ({
      displayPlugin: !prevState.displayPlugin
    }))
  }

  render() {
    return (
      <div className="component-pages">
        <div className="home-div">

          <div>{this.state.displayPlugin ? this.plugin : null}</div>
          <button type="button"
            onClick={this.displayContent.bind(this)}>
            {this.state.displayPlugin ? "Close Events" : "Show Events"}
          </button>
        </div></div>)
  }
}