在 React 中循环到其他组件时 OnClick 不工作

Question

抱歉函数名

我有一个基本的 React 应用程序，它在其中获取数据，即博客的标题和主题，并显示在网站上

这是我的列表组件

import React , {Component} from 'react';

import axios from 'axios'
import Card from './Card.js'

var cardComponent;
class getBlogs extends Component {
  componentDidMount(){
    axios.get('http://localhost:8081/v1/todolist/todo1', {})
      .then( (response)=> {
        this.setState({retrieved : true})
        this.setState({data : response.data})
      })
      .catch(function (error) {
        console.log(error);
      });   
  }

  constructor(){
    super();
    this.state = {
      data : 'none' ,
      retrieved : 'true'
    }
  }

  onned = (event)=>{
    console.log('lof')
  }

  oh = ()=>{
    if(this.state.data !== 'none'){
       cardComponent = this.state.data.map((user , i)=>{
        var some = this.state.data;
        console.log(some[i].title)
        return <Card
          onClick={this.onned()}
          title={some[i].title}
          topic={some[i].topic}
        /> ;
      });
      return cardComponent;
    }
 }

 render(){
    if(this.state.retrieved === true){
      return (
        <div>{this.oh()}</div>
      );
    }
    else{
      return (
          <h1>Loading............................</h1>
      );
    }
  }
}

export default getBlogs;

它正在获取数据，oh 函数循环数据并发送到 Card 组件

Card.js

import React from 'react';

class Card extends React.Component {
  constructor(props) {
    super(props);
  }

  onDiv = (event)=>{
    console.log('hello')
  }

  render() {
    return (
      <div className="container">
          <div  onClick ={this.onDiv()} style={{backgroundSize : 'cover'}} className=" form-control bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
              <div style={{marginLeft : '90px'}}>
                   <h1   style={{ textAlign : "center" , color : "red" , fontWeight : "bold"}} className="display-2">{this.props.title}</h1>
                   <h1   style={{ textAlign : "center" , color : "blue" , fontWeight : "bold"}} className="">{this.props.topic}</h1>
             </div>
          </div>
          <br/>
          <br/>
       </div>
    );
  }
}

export default Card;

现在我想要的是，如果用户单击博客名称列表之一，它应该重定向到其他位置，但是 div 的 onClick 不起作用

在呈现自身时执行 onClick

请不要投票我可能会被阻止

Answer 1

使用这个 onClick ={this.onDiv} 而不是 onClick ={this.onDiv()}。您没有为 onClick 提供回调，而是仅在那里调用该函数

在 React 中循环到其他组件时 OnClick 不工作

OnClick Not Working While Looping To Other Components in React

javascript

frontend

web

reactjs

react-component