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>

包装器应用程序组件：

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>)
  }
}

React按钮onClick已正确绑定，但无法正常工作

2 个答案: