React Bootstrap - 'openModal' 未定义 no-undef

Question

单击按钮时，我希望打开模式。我已经实现了代码，但出现了错误，而且我无法弄清楚原因。这是我的代码：

import React from "react";
import {
    Modal,
    Button,
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    CardFooter,
    Table,
    Row,
    ButtonGroup,
    Col,
  } from "reactstrap";

  function Table() {
    state = {
      isOpen: false
    };
    openModal = () => this.setState({ isOpen: true });
    closeModal = () => this.setState({ isOpen: false });

  return (
      <>
        <div className="contentGroup">
          <Row>
            <Col md="12">
              <Card>
                    <CardHeader>
                    <ButtonGroup style={{float: 'right'}}>
                        <Button className="btn-round btn-icon" color="blue" onClick={this.openModal} style={{float: 'right'}}>
                            <i className="icon-plus-add"/>
                        </Button>
                    </ButtonGroup>
                   </CardHeader>
                       ...
             </Card>
             <Modal show={this.state.isOpen} onHide={this.closeModal}>
              <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>Modal text</Modal.Body>
              <Modal.Footer>
              <Button color="info" onClick={this.closeModal}>
                Close
              </Button>
              </Modal.Footer>
              </Modal>
          </Col>
        </Row>
     </div>
    </>
   );
  }

export default Table;

在控制台中我收到以下错误：

'state' is not defined       no-undef     
'openModal' is not defined   no-undef 
'closeModal' is not defined  no-undef

但我不确定为什么。非常感谢任何帮助。

Answer 1

需要将组件名称更改为 CustomTable，因为您已经从 reactstrap 导入了 Table，以避免名称冲突。

我们不应该在功能组件内部使用 this，因此请更改您的代码以使用 hooks。

import React, { useState } from "react";
import {
    Modal,
    Button,
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    CardFooter,
    Table,
    Row,
    ButtonGroup,
    Col,
  } from "reactstrap";

  function CustomTable() {

  const [ isOpen , setIsOpen ] = useState(false);
    

  const openModal = () =>  setIsOpen(true);

  const closeModal = () => setIsOpen(false);

  return (
      <>
        <div className="contentGroup">
          <Row>
            <Col md="12">
              <Card>
                    <CardHeader>
                    <ButtonGroup style={{float: 'right'}}>
                        <Button className="btn-round btn-icon" color="blue" onClick={openModal} style={{float: 'right'}}>
                            <i className="icon-plus-add"/>
                        </Button>
                    </ButtonGroup>
                   </CardHeader>
                       ...
             </Card>
             <Modal show={isOpen} onHide={closeModal}>
              <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>Modal text</Modal.Body>
              <Modal.Footer>
              <Button color="info" onClick={closeModal}>
                Close
              </Button>
              </Modal.Footer>
              </Modal>
          </Col>
        </Row>
     </div>
    </>
   );
  }

export default CustomTable;

React Bootstrap - 'openModal' 未定义 no-undef

React Bootstrap - 'openModal' is not defined no-undef

javascript

reactjs

react-bootstrap