Question

我的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

Answer 1

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

更改

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

收件人

   onClick={this.handleClick}

Answer 2

如果删除缺少的文件并解决依赖关系，则提供的codeandbox可以正常工作。检查以下内容：https://codesandbox.io/s/o53w1nro26。

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

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

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

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

希望这对您有所帮助。随时询问您是否有任何问题。您可以了解有关SyntheticEvent

的更多信息

Answer 3

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

Answer 4

原来，我的package.json中的引导程序版本不正确。从改变 "bootstrap": "^4.0.0-beta.2" 至： "bootstrap": "^4.2.1"

反应按钮不响应点击

4 个答案: