reactjs - 为什么单击按钮时我的 reactstrap 模式没有打开?
问题描述
我正在开发一个 React 应用程序,尝试在单击按钮时使用 reactstrap 库打开一个模式。此模式将有一个包含 2 个字段的表单,名字和姓氏。提交表单时,主页上的表格中的 2 个单元格应使用名字和姓氏值进行更新。
我想在我当前的代码中解决 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;
解决方案
首先,几个一般说明:
- 我不建议将 reactstrap 与 react-bootstrap 结合使用。它们是两个不同的库,它们的用途几乎相同,但它们的结构不同,不能指望它们能很好地协同工作。相反,您应该使用其中一个或另一个的表格、按钮、模式等。但是出于此答案的目的,我将两个库都保留为您拥有的库。
- 我不清楚你打算如何用行填充表格,所以我将在我的示例中硬编码一些。
以及您的代码中的一些问题:
- 您共享的代码实际上并未编译。该
<CardBody>
标签在 Leads 文件中重复了两次,但只关闭了一次,并且该<LeadsModal>
元素位于 root 之外<div>
。 - 您有一个函数和一个名为 的变量
toggleInfo
,当它试图将函数传递给ModalLeads
组件时,这会混淆代码。重命名一个可以解决这个问题。 - 您没有将足够的数据传递给
ModalLeads
asprops
,也没有保存您需要保存在其中的所有内容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: "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;
推荐阅读
- functional-programming - How to use handle control structures using fluture functional programming library
- python - 这看起来像是使用类的好方法吗?
- javascript - Reverse SVG paths being animated with Javascript
- opengl - Having each invocation of a GLSL compute shader write to an SSBO variable without race conditions
- docker - 在 SBCL Common Lisp 中执行 'docker run'
- async-await - Convert to async await
- gis - Obtaining parcel GIS data controlled by a private company that uses public information/funds to maintain it?
- mysql - Should i use many to many or one to many relationship for User reviews?
- python - How to open and navigate through Windows folders using Python?
- python - I get a 0 Byte file when I upload to S3