ReactJS onclick 按钮以 table 格式显示 mongo 集合

Question

嗨，我是 React 的新手，在 React 中构建了一些东西，这似乎是一个非常普遍的问题。

我想在点击按钮时显示 table。下面是我的代码。

import React from 'react';
import { Link } 
import Button from 'react-bootstrap/lib/Button';
import Panel from 'react-bootstrap/lib/Panel';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
import FormGroup from 'react-bootstrap/lib/FormGroup';



this.state = {
    showSubmit: false,
};

submitForm = () => {
    window.alert('test');
} 

toggleSubmitForm = () => {
    this.setState({
        showSubmit: !this.state.showSubmit
    });
    window.alert('test2');
}

export default (props) => {

  return (
    <AppLayout title="Table Con" activeModules={props.activeModules}>
      <Protected>
        <div className="container-fluid">
          <h4>
            Welcome to the page
            !
            </h4>
        </div>
    <Button
        className="btn btn-secondary"
            bsSize="small"
            onClick={this.toggleSubmitForm}
          >
           Show Table
          </Button>

          {this.state.showSubmit && (
            <div className="container-fluid well" id="submitT">
              <form onSubmit={this.submitForm}>
                <Grid>
                  <Row>
                    <Col xs={12}>
                      <div>
                        <h3>HERE</h3>
                      </div>s
                      <br />
                      <br />
                    </Col>
                  </Row>
                </Grid>
                <Button type="submit" bsStyle="success" bsSize="large">
                  Submit
                </Button>
              </form>
            </div>
          )}
      </Protected>
    </AppLayout>
  );
};

但是当调用 onClick 时，什么也没有发生。

我不确定我哪里失败了。

此外，如果我想在单击显示 Table 按钮后调用 mongo 集合并呈现 table。要进行哪些更改？

Answer 1

您正在组合功能和 class 组件功能。除非您使用 useState 功能（16.3 更新），否则功能组件无权访问状态。任何 "this." 在您的代码中基本上是未定义的。像这样重写你的组件：

import React, {Component} from 'react' // or PureComponent
// ...other imports

    class YourComponent extends Component {
        state = {
            showSubmit: false
        }

        submitForm = () => { /* what ever */}
        toggleSubmitForm  = () => { 
            this.setState({showSubmit: !this.state.showSubmit})
        }

        render(){
            return(
                ... your render code
            )
        }
    }

    export default YourComponent

Answer 2

正如@noitse 所指出的，您正在混合有状态和无状态组件功能。

但是，如果您想将组件保留为函数，React 添加了一个新的替代方法，即 Hooks。这是你的代码看起来像一个钩子：

import { useState } from 'react'

export default props => {
    const[showSubmit, setShowSubmit] = useState(false)

  return (
    <AppLayout title="Table Con" activeModules={props.activeModules}>
      <Protected>
        <div className="container-fluid">
          <h4>Welcome to the page !</h4>
        </div>
        <Button className="btn btn-secondary" bsSize="small" onClick={setShowSubmit(true)}>
          Show Table
        </Button>

        {showSubmit && /* Your table*/}
      </Protected>
    </AppLayout>
  );
};

ReactJS onclick 按钮以 table 格式显示 mongo 集合

ReactJS onclick of a button display mongo collection in table format

render

reactjs

react-component