为什么单击我的按钮时我的Reactstrap模式不打开？

问题描述 投票：0回答：1

我正在开发一个React应用，试图在单击按钮时使用reactstrap库打开一个模式。该模式将具有一个包含2个字段的表单，名字和姓氏。提交表单后，应使用“名”和“姓”值更新主页上表格中的2个单元格。

我希望在当前代码中解决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;

这是Leads文件的当前代码，其中包括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;
reactjs bootstrap-modal react-bootstrap reactstrap react-bootstrap-table
1个回答
0
投票

首先，有几点一般注意事项：

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

以及代码中的一些问题：

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

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

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 = {
      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: "[email protected]",
          phone: "(123) 456-7890",
          title: "King",
          id: "0"
        },
        {
          firstName: "Paul",
          lastName: "McCartney",
          email: "[email protected]",
          phone: "(987) 654-3210",
          title: "Beatle",
          id: "1"
        },
        {
          firstName: "Mick",
          lastName: "Jagger",
          email: "[email protected]",
          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;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.