Кнопка реагирования не отвечает на нажатие

Question

Нажатие кнопки «Моя реакция» не отвечает на клик. Я просто делаю простой console.log (), и это даже не работает.

Странная вещь в том, что когда я также помещаю кнопку в App.js, кнопка щелкает в моем другом компоненте, но не без него. Это заставляет меня думать, что это как-то связано с тем, как оно монтируется.

В App.js у меня есть следующая функция render () в App.js для маршрутизации в мой компонент (Tweets.js):

<div className="App-intro">
    <Switch>
      <Route path="/home" component={Home}/>
      <Route path="/appTweets" render={(props) => <Tweets {...props} tweets="home" />} />
    </Switch>

А это Tweets.js:

import React, { Component } from 'react'
import {Tweet} from 'react-twitter-widgets';


const TweetList = (props) => {
  console.log('tweet list props');
  console.log(props)
  return (
    <div>{props.tweets.map(tweet=> <Tweet key={tweet.tweet_id} {...tweet}/>)}
    </div>

  ); 
}


class Tweets extends React.Component {

  constructor(props) {
    super(props)
    console.log("tweet props");
    console.log(props);
    this.handleClick=this.handleClick.bind(this);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      tweets: [],
      selectedPolitician: null,
    }
  }

  handleClick(e) {
    console.log('clicked aoc ');
    console.log(e);
  }



  componentDidMount() {
    console.log("fetching the hostname");
    // fetch(HOST_NAME + TWEET_ENDPOINT) 
    var hostname = "";
    if (window.location.hostname === "localhost"){
      hostname = "http://localhost:8000";
    } else {
      hostname = "https://pst-360.herokuapp.com"
    }
    console.log(hostname);
    fetch(hostname + "/tweets/?format=json")
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result,
          tweets: result.results.map(function(tweet){
            return {"tweetId": tweet.tweet_id};
          })
        });
        console.log("got result!");
        console.log(result);
      }
    )  
  }

   render() {
     return (
     <div className="container-fluid text-center">

  <button type="button" className="btn btn-primary" onClick={this.handleClick.bind(this)}>Alexandria Ocasio Cortex</button>

    <div className="row content">  
    </div>
      <div className="col-sm-8 text-left"> 
        <TweetList tweets={this.state.tweets} />
      </div>
      <div className="col-sm-2 sidenav">
      </div>
  </div>

     )
   }
 }
 export default Tweets

Answer 1

Оказалось, что в моем package.json была неверная версия bootstrap. Изменено с "bootstrap": "^4.0.0-beta.2" чтобы: "bootstrap": "^4.2.1"

Answer 2

Коды и коробка, которые вы предоставили, работает нормально, если вы удалите отсутствующие файлы и разрешите зависимости.Проверьте это: https://codesandbox.io/s/o53w1nro26.

Но вы по-прежнему видите предупреждения в консоли.Это связано с тем, как события обрабатываются в React.Может быть, это поможет вам решить вашу проблему в этом / будущих случаях.

Всякий раз, когда вы пытаетесь обработать события в рамках реакции, он возвращает экземпляр SyntheticEvent .Причиной этого является повышение производительности и обеспечение кросс-браузерной совместимости.Таким образом, событие, которое вы получаете, отличается от фактического события DOM, и оно не доступно в асинхронном коде, что может в большинстве случаев приводить к ошибке.Таким образом, правильный подход - извлечь нужные значения из этого события в разные переменные и использовать вместо них эти переменные.Например,

handleClick = ({target, value}) => console.log(target, value);

Здесь мы извлекаем цель и значения из события, потому что React выдает предупреждение, если вы пытаетесь использовать событие напрямую.

Надеюсь, это вам поможет.Не стесняйтесь спрашивать, если у вас есть какие-либо вопросы.Вы можете узнать больше о SyntheticEvent

Answer 3

Проблема может быть связана с пакетами начальной загрузки.Попробуйте npm установить загрузчик.

Answer 4

Единственная проблема, которую я мог видеть в отношении onClick, заключается в том, что вы уже сделали привязку для handleClick в конструкторе, поэтому опять нет необходимости связывать при вызове кнопки onClick. В противном случае все выглядит хорошо кнопка должна работать, пожалуйста, проверьте еще раз

Изменение

   onClick={this.handleClick.bind(this)}

К

   onClick={this.handleClick}