为什么单击按钮时我的 reactstrap 模式没有打开？

Question

我正在开发一个 React 应用程序，尝试使用 reactstrap 库在单击按钮时打开一个模式。此模式将有一个包含 2 个字段的表单，名字和姓氏。提交表单后，主页上的表格中的 2 个单元格应使用 First Name 和 Last Name 值进行更新。

我想要一些关于我当前代码中的 2 个问题的帮助：

1. 单击按钮时无法弹出模式。
2. 我不知道如何使用模态表单中的数据填充表格单元格。

这是我当前的 ModalLeads 文件代码，其中包含模态：

import React, { Component } from "react";
import {
  Modal,
  ModalFooter,
  ModalBody,
  ModalHeader,
  Button,
  Col,
  Form,
  FormGroup,
  Input,
  Label
} from "reactstrap";

class ModalLeads extends Component {
  constructor(props) {
    super(props);

    this.state = {

      info: false,
      firstName: null,
      lastName: null,

    };

    this.handleChange = this.handleChange.bind(this);
  }

  //******************************************************************** */
  handleChange = e => {
    e.preventDefault();

    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <Modal
        isOpen={this.state.info}
        toggle={this.toggleInfo}
        backdrop="static"
        keyboard={false}
        className={"modal-lg " + this.props.className}
      >
        <Form
          action=""
          method="POST"
          onChange={this.handleChange}
          onSubmit={this.onCreate}
          encType="multipart/form-data"
        >
          <ModalHeader toggle={this.toggleInfo} className="blue-header">
            <i className="cui-people"></i>Leads
          </ModalHeader>
          <ModalBody>
            <FormGroup row className="my-0">

              <Col xs="8">
                <FormGroup>
                  <Label htmlFor="firstName">First Name</Label>
                  <Input
                    onChange={this.handleChange}
                    name="firstName"
                    type="text"
                    id="firstName"
                    value={this.state.firstName || ""}
                    placeholder="Enter First Name"
                  />
                </FormGroup>
              </Col>
              <Col xs="4">
                <FormGroup>
                  <Label htmlFor="lastName">Last Name</Label>
                  <Input
                    onChange={this.handleChange}
                    name="lastName"
                    type="text"
                    id="lastName"
                    value={this.state.lastName || ""}
                    placeholder="Last Name"
                  />
                </FormGroup>
              </Col>
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="primary" type="submit" onClick={this.toggleInfo}>
              <i className="cis-check-double-alt"></i> Save
            </Button>
            <Button
              color="secondary"
              onClick={() => {
                this.toggleInfo();
                this.resetForm();
              }}
            >
              Cancel
            </Button>
          </ModalFooter>
        </Form>
      </Modal>
    );
  }
}

export default ModalLeads;

这是我当前的潜在客户文件代码，其中包括一个 ModalLeads 元素：

import React, { Component, Suspense } from "react";
import axios from "axios";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import "react-bootstrap-table/dist//react-bootstrap-table-all.min.css";
import LeadsModal from "../Modal/ModalLeads";
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Row,
  ModalFooter
} from "reactstrap";

// state value for info is initially set to false but should be updated to true when we want to trigger the modal to show:

class Leads extends Component {
  constructor(props) {
    super(props);


    this.state = {
      modalClient: false,
      leadId: null,
      info: false,
      firstName: null,
      lastName: null,
}
this.toggleInfo = this.toggleInfo.bind(this);

}

toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }


// function to change the state value for info, should run when we want to open or close the modal:

  toggleInfo(leadId) {
    this.setState({
      info: !this.state.info
    });

  }
buttonFormat(cell, row) {
    //const id = api + `clients/${row.id}`;
    const id = row.id;
    return (
      <Row>
        <Button className="btn btn-primary" onClick={() => this.toggleInfo(id)}>
          <i className="cis-comment-bubble-edit"></i>
        </Button>

      </Row>
    );
  }

render() {
    return (


          {/************************ Windows Modal */}

          <LeadsModal
            isOpen={this.state.info}
            toggle={this.toggleInfo}
            backdrop="static"
            keyboard={false}
            className={"modal-lg " + this.props.className}
          />

// I use react-bootstrap-table for rendering the grid:

<div>
 <Card>
 <CardBody>


 <CardBody>
            <BootstrapTable
              data={this.state.table}
              version="4"
              striped
              hover
              pagination
              options={this.options}
            >
              <TableHeaderColumn dataField="firstName" dataSort>
                First Name
              </TableHeaderColumn>
              <TableHeaderColumn dataField="lastName" dataSort>
                Last Name
              </TableHeaderColumn>
              <TableHeaderColumn isKey dataField="email">
                Email
              </TableHeaderColumn>
              <TableHeaderColumn dataField="phone" dataSort>
                Phone
              </TableHeaderColumn>
              <TableHeaderColumn dataField="title" dataSort>
                Title
              </TableHeaderColumn>
              <TableHeaderColumn
                dataField="id"
                dataFormat={this.buttonFormat.bind(this)}
              >
                Action
              </TableHeaderColumn>
            </BootstrapTable>
          </CardBody>
        </Card>
      </div>
    );
  }
}

export default Leads;

Answer 1

首先，一些一般性说明：

1. 我不建议将 reactstrap 与 react-bootstrap 结合使用。它们是两个不同的库，它们的用途几乎相同，但它们的结构不同，不能指望它们能很好地协同工作。相反，您应该使用其中一个或另一个的表格、按钮、模式等。但出于此答案的目的，我将这两个库保留为您所拥有的。
2. 我不清楚您打算如何用行填充表格，因此我将在示例中硬编码一些。

以及您代码中的一些问题：

1. 您共享的代码实际上并未编译。 <CardBody> 标记在 Leads 文件中重复两次但仅关闭一次，并且 <LeadsModal> 元素位于根 <div> 之外。
2. 您同时拥有一个名为toggleInfo 的函数和一个变量，当它试图将函数传递给ModalLeads 组件时，这会混淆代码。重命名一个可以解决这个问题。
3. 您没有以props 的形式将足够的数据传递给ModalLeads，也没有将您需要保存的所有内容保存在state 中。
4. 您不需要表单onSubmit 和提交按钮onClick。单击提交按钮时，表单的onSubmit 函数将运行。

这是我的工作示例，我相信它可以满足您的所有要求：

模态线索文件：

import React, { Component } from "react";
import {
  Modal,
  ModalFooter,
  ModalBody,
  ModalHeader,
  Button,
  Col,
  Form,
  FormGroup,
  Input,
  Label
} from "reactstrap";

class ModalLeads extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modalClient: false,
      info: this.props.isOpen,
      firstName: null,
      lastName: null
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = e => {
    e.preventDefault();

    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.updateRowBound(
      this.props.leadId,
      this.state.firstName,
      this.state.lastName
    );
    this.props.toggleInfoBound();
    this.resetForm();
  };

  resetForm() {
    this.state.firstName = null;
    this.state.lastName = null;
  }

  render() {
    return (
      <Modal
        isOpen={this.props.isOpen}
        toggle={() => {
          this.props.toggleInfoBound();
          this.resetForm();
        }}
        backdrop="static"
        keyboard={false}
        className={"modal-lg " + this.props.className}
      >
        <Form
          id="name-change-form"
          action=""
          method="POST"
          onChange={this.handleChange}
          onSubmit={this.handleSubmit}
          encType="multipart/form-data"
        >
          <ModalHeader
            toggle={() => {
              this.props.toggleInfoBound();
              this.resetForm();
            }}
            className="blue-header"
          >
            <i className="cui-people"></i>Leads
          </ModalHeader>
          <ModalBody>
            <FormGroup row className="my-0">
              <Col xs="8">
                <FormGroup>
                  <Label htmlFor="firstName">First Name</Label>
                  <Input
                    onChange={this.handleChange}
                    name="firstName"
                    type="text"
                    id="firstName"
                    value={this.state.firstName || ""}
                    placeholder="Enter First Name"
                  />
                </FormGroup>
              </Col>
              <Col xs="4">
                <FormGroup>
                  <Label htmlFor="lastName">Last Name</Label>
                  <Input
                    onChange={this.handleChange}
                    name="lastName"
                    type="text"
                    id="lastName"
                    value={this.state.lastName || ""}
                    placeholder="Last Name"
                  />
                </FormGroup>
              </Col>
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="primary" type="submit">
              <i className="cis-check-double-alt"></i> Save
            </Button>
            <Button
              color="secondary"
              onClick={() => {
                this.props.toggleInfoBound();
                this.resetForm();
              }}
            >
              Cancel
            </Button>
          </ModalFooter>
        </Form>
      </Modal>
    );
  }
}

export default ModalLeads;

线索文件：

import React, { Component, Suspense } from "react";
import axios from "axios";

import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import "react-bootstrap-table/dist//react-bootstrap-table-all.min.css";
import LeadsModal from "../Modal/ModalLeads";
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Row,
  ModalFooter
} from "reactstrap";

class Leads extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modalClient: false,
      leadId: null,
      info: false,
      firstName: null,
      lastName: null,
      table: [
        {
          firstName: "Elvis",
          lastName: "Presley",
          email: "elvis@example.com",
          phone: "(123) 456-7890",
          title: "King",
          id: "0"
        },
        {
          firstName: "Paul",
          lastName: "McCartney",
          email: "paul@example.com",
          phone: "(987) 654-3210",
          title: "Beatle",
          id: "1"
        },
        {
          firstName: "Mick",
          lastName: "Jagger",
          email: "mick@example.com",
          phone: "(800) 867-5309",
          title: "Stone",
          id: "2"
        }
      ]
    };
    this.toggleInfoBound = this.toggleInfo.bind(this);
    this.updateRowBound = this.updateRow.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  toggleInfo(leadId) {
    this.state.leadId = leadId;
    this.setState({
      info: !this.state.info
    });
  }

  buttonFormat(cell, row) {
    const id = row.id;
    return (
      <Row>
        <Button className="btn btn-primary" onClick={() => this.toggleInfo(id)}>
          <i className="cis-comment-bubble-edit"></i>Change Name
        </Button>
      </Row>
    );
  }

  updateRow(leadId, firstName, lastName) {
    var rowToUpdate = this.state.table.find(x => x.id === leadId);
    rowToUpdate.firstName = firstName;
    rowToUpdate.lastName = lastName;
  }

  render() {
    return (
      <div>
        <LeadsModal
          isOpen={this.state.info}
          toggleInfoBound={this.toggleInfoBound}
          updateRowBound={this.updateRowBound}
          backdrop="static"
          keyboard={false}
          className={"modal-lg " + this.props.className}
          leadId={this.state.leadId}
        />
        <Card>
          <CardBody>
            <BootstrapTable
              data={this.state.table}
              version="4"
              striped
              hover
              pagination
              options={this.options}
            >
              <TableHeaderColumn dataField="firstName" dataSort>
                First Name
              </TableHeaderColumn>
              <TableHeaderColumn dataField="lastName" dataSort>
                Last Name
              </TableHeaderColumn>
              <TableHeaderColumn isKey dataField="email">
                Email
              </TableHeaderColumn>
              <TableHeaderColumn dataField="phone" dataSort>
                Phone
              </TableHeaderColumn>
              <TableHeaderColumn dataField="title" dataSort>
                Title
              </TableHeaderColumn>
              <TableHeaderColumn
                dataField="id"
                dataFormat={this.buttonFormat.bind(this)}
              >
                Action
              </TableHeaderColumn>
            </BootstrapTable>
          </CardBody>
        </Card>
      </div>
    );
  }
}

export default Leads;