反应按钮没有响应点击答案

【问题标题】：React button not responding to click反应按钮没有响应点击
【发布时间】：2019-06-18 20:51:56
【问题描述】：

我的 React 按钮的点击没有响应 onClick。我只是在做一个简单的console.log()，这甚至都行不通。

奇怪的是，当我也将按钮放在 App.js 中时，按钮会在我的其他组件中单击，但不会没有它。这让我觉得它与它的安装方式有关。

在 App.js 中，我在 App.js 的 render() 中有以下内容来路由到我的组件 (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

【问题讨论】：

这是一个工作沙箱：codesandbox.io/s/r4zrkqpyy4 当我单击按钮时，控制台消息会被记录下来。除了删除您未包含在沙箱中的文件的导入和代码引用之外，我没有进行任何更改。

标签： javascript reactjs button

【解决方案1】：

我能看到的关于 onClick 的唯一问题是您已经在构造函数中为 handleClick 进行了绑定，因此在调用按钮 onClick 时再次不需要绑定。否则一切看起来都很好按钮应该可以工作，请仔细检查

改变

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

到

   onClick={this.handleClick}

【讨论】：

很遗憾，这并不能解决问题。
你一定是做错了什么。通过查看您共享的按钮功能代码应该可以工作。请在代码沙箱或 stackblitz 中创建可重现的版本
对不起...我不知道如何让 React 代码在沙箱中工作。

【解决方案2】：

如果您删除丢失的文件并解决依赖关系，您提供的代码框可以正常工作。检查这个：https://codesandbox.io/s/o53w1nro26。

但您仍然会在控制台中看到警告消息。它与 React 中事件的处理方式有关。也许这会帮助您在此/将来的情况下解决您的问题。

每当您尝试在 react 中处理事件时，它都会返回一个 SyntheticEvent 的实例。这样做的原因是为了提高性能并启用跨浏览器兼容性。因此，您收到的事件与实际的 DOM 事件不同，并且在异步代码中不可访问，这可能导致大多数时间出错。因此，正确的方法是将您需要的值从该事件中提取到不同的变量中，然后使用该变量。例如

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

这里我们从事件中提取目标和值，因为如果你尝试直接使用事件，React 会抛出警告。

我希望这对您有所帮助。如果您有任何问题，请随时询问。您可以了解更多关于SyntheticEvent

【讨论】：

【解决方案3】：

问题可能是与引导程序相关的软件包。尝试 npm install bootstrap。

【讨论】：

【解决方案4】：

原来我的 package.json 中的 bootstrap 版本不正确。从改变 "bootstrap": "^4.0.0-beta.2" 到： "bootstrap": "^4.2.1"

【讨论】：