0

reactstrap 中的按钮 onClick 函数没有返回新页面，但我在函数中创建的日志正在运行。它出现在 renderData() 和 handleExam() 中的问题，其中 renderData 应该将卡片添加到页面和handleExam() 重定向到下面给出的具有特定 id 的另一个页面，以便该 id 可用于从 db 获取数据。

import React,{ Component } from "react";
import "./Home.css";
import { userService } from '../_service/user.service'; 
import Exam from "./Exam";
import {
  Card,  CardSubtitle, CardText, Col, CardHeader, Row ,Button
} from 'reactstrap';
class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      isSucess: false,
      arr:[]
    };
  }

  componentDidMount(){
    userService.getExamDetails().then(
      data =>{
            console.log(data)
            this.setState({arr:data})
            this.setState({isSucess:true});
      },
      error => console.log(error)
      )

  }
  examHandle(id){
    console.log(id);
   return (<Exam id={id} />)  }
  renderData(){
   var rendered = this.state.arr.map( (a,index) => {
     return (
    <Col key={a.exam_id} sm="6">
      <Card key={index} className= { "card -"+ a.exam_id } >
    <CardHeader >{a.exam_name}</CardHeader>
    <CardSubtitle>Start Date : {a.start_date}</CardSubtitle>
    <CardSubtitle>End Date : {a.end_date}</CardSubtitle>
    <CardText>{a.is_payed ? "hello World" : "how old are you"}</CardText>
     <Button color='primary' onClick={()=>{this.examHandle(a.exam_id)}}>Button</Button>
    </Card>
    </Col>);
    })
    return <Row sm="6">{rendered}</Row>;
  }
  render(){
  return (
    <div className="Home">
      <div className="lander">
      <div>{this.state.isSucess ?
         this.renderData()

        :
        <h1>No Active Exams</h1>}
      </div>
      </div>
    </div>
  );
}}

export default Home;

我需要显示的页面

import React from "react";

const Exam = (props)=>{

    return(
        <div>
            Hello World!!!
    <p>{props.id}</p>
        </div>
    );
}
export default Exam;

我尝试直接调用该函数 onClick() 但这也不起作用。
4

1 回答 1

0

你必须知道 React 只会在状态发生变化时重新渲染。如果没有状态变化，返回是没有用的。

你可以做的是学习 React-Router，它可以根据用户交互提供对不同组件的导航。

于 2020-06-18T07:24:44.923 回答