Реагирующая кнопка на щелчке правильно привязана, но не работает - PullRequest
Новая
       63

Реагирующая кнопка на щелчке правильно привязана, но не работает

0 голосов
/ 24 марта 2019

Кнопка в компоненте реакции не обеспечивает функцию в onClick при рендеринге DOM. Проверка элемента показывает, что свойство элемента кнопки имеет f noop ()

Куда делась моя функция?

Я делаю одностраничную веб-страницу React, которая использует реагирующий маршрутизатор, реагирующий загрузчик, реагирующую группу перехода, 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```

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

Проблема была в двух моих делениях с classNames, которые я использовал в других компонентах.Не слишком уверен, почему это отключило бы мой обработчик onClick, но это исправило после того, как я удалил эти div.

<div className="component-pages">
   <div className="home-div">
0 голосов
/ 24 марта 2019

Необходимо связать это с событием.Смотри ниже рабочий код. 

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