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

Posted 2023-03-23

【中文标题】为啥单击按钮时我的 reactstrap 模式没有打开？

【英文标题】：Why is my reactstrap modal not opening when my button is clicked?为什么单击按钮时我的 reactstrap 模式没有打开？

【发布时间】：2020-05-15 14:20:02

【问题描述】：

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

我想要一些关于我当前代码中的 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;

【问题讨论】：

抱歉不干净，是的，我想从 onClick 打开模态，我需要发送状态值以填充输入

我的问题是如何用状态填充我的输入

我刚刚更新了您的问题和代码，使其更加清晰。将来，请在描述您的问题时尽可能清楚，尽可能详细地提供。另外，请不要将同一文件的代码分成多个 sn-ps，因为这会使代码在调试时更难以阅读和复制。

【参考方案1】：

首先，一些一般性说明：

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

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

您共享的代码实际上并未编译。 <CardBody> 标记在 Leads 文件中重复两次但仅关闭一次，并且 <LeadsModal> 元素位于根 <div> 之外。 您同时拥有一个名为toggleInfo 的函数和一个变量，当它试图将函数传递给ModalLeads 组件时，这会混淆代码。重命名一个可以解决这个问题。 您没有以props 的形式将足够的数据传递给ModalLeads，也没有将您需要保存的所有内容保存在state 中。 您不需要表单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: "[e-mail]",
          phone: "[phone]",
          title: "King",
          id: "0"
        ,
        
          firstName: "Paul",
          lastName: "McCartney",
          email: "[e-mail]",
          phone: "[phone]",
          title: "Beatle",
          id: "1"
        ,
        
          firstName: "Mick",
          lastName: "Jagger",
          email: "[e-mail]",
          phone: "[phone]",
          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;

【讨论】：

嘿 sfabota，我需要 pas 状态，因为我可以填写表格或我的模式研究人员，我确实喜欢这个 `` ``` 这就是我得到的值并填写表格

如何获得模态的道具？

我不确定我是否理解您的第一条评论。我提供的代码中的某些内容对您不起作用吗？关于如何获取modal中的props，使用this.props.isOpen、this.props.leadId等即可。

或者，如果您问如何将道具传递给模态框，就像您在第一条评论中所做的那样。