如何使用 react 将数据传递给模态.编辑还是删除?

Question

我想在单击按钮编辑(如 id、电子邮件和密码(时将数据传递给模态。刚开始反应。我在这里使用 API。当我使用 laravel 或其他 pl 时，我该怎么做似乎非常不同。希望得到一些关于如何做到这一点的帮助和建议。

这是代码，this.state 包含我的 API 中的字段 切换模态和要使用 react-table 返回的获取 API

import React from 'react';
import namor from "namor";
import ReactTable from 'react-table';
import { Link } from 'react-router-dom';
import { Panel, PanelHeader } from './../../components/panel/panel.jsx';
import 'react-table/react-table.css';
import axios from 'axios';
import SweetAlert from 'react-bootstrap-sweetalert';
import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class apitable extends React.Component {
constructor(props) {
super(props);

this.state = {
tableData: [{
id: '',
email: '',
password: '',
modalDialog: false,
modalWithoutAnimation: false,
}],
};
this.toggleModal = this.toggleModal.bind(this);

}
toggleModal(name) {
switch (name) {
case 'modalDialog':
this.setState({ modalDialog: !this.state.modalDialog });
break;
case 'modalWithoutAnimation':
this.setState({ modalWithoutAnimation: !this.state.modalWithoutAnimation });
break;
case 'modalMessage':
this.setState({ modalMessage: !this.state.modalMessage });
break;
case 'modalAlert':
this.setState({ modalAlert: !this.state.modalAlert });
break;
default:
break;
}
}

componentDidMount() {
axios
.get("https://lmsapi.riverside-tekteach.com/api/teachers", {
responseType: "json"
})
.then(response => {
this.setState({ tableData: response.data });
});
}
render() {
const { tableData } = this.state;
return (

<div class="panel panel-inverse">

Edit Modal
<Modal isOpen={this.state.modalWithoutAnimation} fade={false} toggle={() => this.toggleModal('modalWithoutAnimation')} >
<ModalHeader toggle={() => this.toggleModal('modalWithoutAnimation')}>Modal Without Animation</ModalHeader>
<ModalBody>
<p>
</p>
</ModalBody>
<ModalFooter>
<button className="btn btn-white" onClick={() => this.toggleModal('modalWithoutAnimation')}>Close</button>
</ModalFooter>
</Modal>

<div class="panel-body  undefined">
<ReactTable filterable data={tableData} columns={[
{
Header: 'Info',
columns: [
{
Header: 'Id',
accessor: 'id',
},
{
Header: 'Email',
id: 'email',
accessor: d => d.email,
},
{
Header: 'Password',
id: 'password',
accessor: d => d.password,
},
{
id: 'edit',
accessor: '[row identifier to be passed to button]',
//Cell: ({ value }) => (<button className="btn btn-danger btn-sm">Edit</button>)
Cell: row => (
<div>
<button onClick={() => this.toggleModal('modalWithoutAnimation')} className="btn btn-info btn-sm">Edit {tableData.map(tableData => tableData.id(1))}</button>&nbsp;
<button className="btn btn-danger btn-sm" >Deletes </button>
</div>
)
},
],
},
]} defaultPageSize={10} defaultSorted={this.defaultSorted} className="-highlight" />
</div>
</div>
)}}
export default apitable

Answer 1

您可以定义状态变量并在模态中使用它。

this.state = {
selectedData:{},
tableData: [{
id: '',
email: '',
password: '',
modalDialog: false,
modalWithoutAnimation: false,
}],
};

并传递选定的行数据，如下所示

Cell: row => (
<div>
<button onClick={() => {
this.setState({selectedData:row.original})
console.log(row.original)
this.toggleModal('modalWithoutAnimation')}} className="btn btn-info btn-sm">Edit </button>&nbsp;
<button className="btn btn-danger btn-sm" >Deletes </button>
</div>
)

内部模态

<ModalBody>
<p>
{this.state.selectedData.id}<br/>
{this.state.selectedData.email}<br/>
{this.state.selectedData.password}
</p>
</ModalBody>

Answer 2

只是在这里试一试。通常，在 react 中使用数组并且您想对条目进行操作，然后您传入回调您想要使用的元素的索引。

创建一个新的 onClick 处理程序，用于设置要编辑的索引并切换模式打开

editByIndex(editIndex) {
this.setState({ editIndex });
this.toggleModal("modalWithoutAnimation");
}

更新onClick回调

Cell: row => (
<div>
<button
onClick={() => editByIndex(row.index)} // based on row props
className="btn btn-info btn-sm"
>
Edit
</button>
&nbsp;
<button className="btn btn-danger btn-sm">Delete</button>
</div>
)

行道具

然后将this.state.tableData[this.state.editIndex]传递给模态