点击按钮reactjs后显示类内容

Question

我正在使用 reactjs，我有两个类 Table 和 APP，每个类都在一个单独的文件中（Table.js 和 App.js）；在我的 App.js 中，我编写了一个 html 代码，单击该按钮后我有一个按钮，我想显示渲染内的表格内容。我试过这样做：<Button onClick={<Table/>}，但它不起作用。有什么建议吗？

import React, { Component } from 'react'
import './Table.css'

class Table extends Component {
   constructor(props) {
      super(props) 
      this.state = { 
      
         Offers: [
            {  name: 'Name1', website: 25 },
            {  name: 'Name2', website: 19},
            { name: 'Name3', website: 16},
            { name: 'Name4', website: 25}
         ],
         
      }
   }

   renderTableHeader() {
    let header = Object.keys(this.state.Offers[0])
    return header.map((key, index) => {
       return <th key={index}>{key.toUpperCase()}</th>
    })
 }
renderTableData() {
    return this.state.Offers.map((offer, index) => {
       const {  name, website} = offer
       return (
          <tr >
       
             <td>{name}</td>
             <td>{website}</td>
          
          </tr>
       )
    })
 }

 render() {
    return (
       <div>
          <h1 id='title'>Start-ups List Table</h1>
          <table id='offers'>
             <tbody>
             
                <tr>{this.renderTableHeader()}</tr>
                  {this.renderTableData()}
             </tbody>
          </table>
       </div>
    )
 }

}
export default Table 

import React, { Component} from 'react';
import {
  Container, Col, Form,
  FormGroup, Label, Input,
  Button, Dropdown, 
} from 'reactstrap';
import Axios from "axios";
import './App.css';
import Table from './Table';

class App extends Component {


   render(){
    return (
        <div>
     <div className="box"> 
           
          <div className="element sourcedropdown" >
            <label>Source :</label>
            <select className="form-control" name="Sources" onChange={this.handleChange}>
              <option selected>Select Source</option>
              <option value="1">src1</option>
              <option value="2">src2</option>
              <option value="3">src3</option>
            </select>
          </div>
          <div className="element Techdropdown">
            <label>Technology :</label>
            <select className="form-control" name="Tech"  onChange= {this.handleChange}>
              <option selected>Select Technology</option>
              <option className="dropdown-item" value="1">tech1</option>
              <option className="dropdown-item" value="2">tech2</option>
              <option className="dropdown-item" value="3">tech3</option>
            </select>
          </div>
          
          
          <div id="contrat" className="element contrat">
          <label>Contract :</label>
            <select className="form-control" name="Tech"  onChange= {this.handleChange}>
              <option selected>Select contract</option>
              <option className="dropdown-item" value="1">V1</option>
              <option className="dropdown-item" value="2">V2</option>
              <option className="dropdown-item" value="3">V3</option>
              <option className="dropdown-item" value="3">V4</option>
            </select>
          </div>
          <div id="checkbox" className ="element checkbox">
          <label check>
          <input type="checkbox"  onChange= {this.handleChange} />{' '}
          Remote
         </label>
          </div>
           <Button className="button" onClick={<Table/>}>Submit</Button> //here where i want to call Table
          </div>    
            
        </div>
         
      
    );
   }
}

export default App;

Answer 1

您已将表格渲染放置在 onClick 方法回调中。 onClick is 方法只是一个回调。您必须根据状态有条件地显示表格，因为您正在显示其他标签。您可以根据按钮单击更改状态。

https://codesandbox.io/s/morning-hooks-ie74g?file=/src/App.js:0-2760

import React, { Component } from "react";
import {
  Container,
  Col,
  Form,
  FormGroup,
  Label,
  Input,
  Button,
  Dropdown
} from "reactstrap";
import Axios from "axios";
import Table from "./Table";

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      displayTable: false
    };
  }
  render () {
    return (
      <div>
        <div className="box">
          <div className="element sourcedropdown">
            <label>Source :</label>
            <select
              className="form-control"
              name="Sources"
              onChange={this.handleChange}
            >
              <option selected>Select Source</option>
              <option value="1">src1</option>
              <option value="2">src2</option>
              <option value="3">src3</option>
            </select>
          </div>
          <div className="element Techdropdown">
            <label>Technology :</label>
            <select
              className="form-control"
              name="Tech"
              onChange={this.handleChange}
            >
              <option selected>Select Technology</option>
              <option className="dropdown-item" value="1">
                tech1
              </option>
              <option className="dropdown-item" value="2">
                tech2
              </option>
              <option className="dropdown-item" value="3">
                tech3
              </option>
            </select>
          </div>

          <div id="contrat" className="element contrat">
            <label>Contract :</label>
            <select
              className="form-control"
              name="Tech"
              onChange={this.handleChange}
            >
              <option selected>Select contract</option>
              <option className="dropdown-item" value="1">
                V1
              </option>
              <option className="dropdown-item" value="2">
                V2
              </option>
              <option className="dropdown-item" value="3">
                V3
              </option>
              <option className="dropdown-item" value="3">
                V4
              </option>
            </select>
          </div>
          <div id="checkbox" className="element checkbox">
            <label check>
              <input type="checkbox" onChange={this.handleChange} /> Remote
            </label>
          </div>
          <Button
            className="button"
            onClick={() => {
              this.setState({ displayTable: true });
            }}
          >
            Submit
          </Button>
        </div>
        {this.state.displayTable ? <Table /> : ""}
      </div>
    );
  }
}

export default App;