Во-первых, пара общих замечаний:
- Я бы не советовал сочетать реакционную полосу с реактивной - bootstrap. Это две разные библиотеки, которые служат практически одной и той же цели, но они структурированы по-разному, и на них нельзя рассчитывать, чтобы они хорошо играли вместе. Вместо этого вы должны использовать таблицы, кнопки, модалы и т. Д. c. все из одного или другого. Но для целей этого ответа я сохранил обе библиотеки такими, какие они есть у вас.
- Мне не ясно, как вы планируете заполнять таблицу строками, поэтому я собираюсь несколько жестко закодировать в моем примере.
И несколько проблем в вашем коде:
- Код, которым вы поделились, на самом деле не компилируется. Тег
<CardBody> повторяется дважды в файле Leads, но закрывается только один раз, а элемент <LeadsModal> находится за пределами root <div>. - У вас есть и функция, и переменная с именем
toggleInfo, что вводило в заблуждение код, когда он пытался передать функцию в компонент ModalLeads. Переименование одного исправляет эту проблему. - Вы не передали достаточно данных в
ModalLeads как props, а также не сохраняли все, что нужно для сохранения, в state. - Вам не нужны ни форма
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;
Leads file:
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;