本文介绍了如何使用react将数据传递给Modal.编辑还是删除?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在单击按钮编辑时将数据传递给模式,例如ID,电子邮件和密码.刚开始反应.我在这里使用API.当我使用laravel或其他pl时,该怎么办似乎有很大不同.希望对如何做有帮助和建议.
I want to pass the data to the modal when the button edit is clicked like the id, email, and password. Just started with react. I'm using API here. How can I do that seems it very different when I'm using laravel or other pl's. Hope for some help and advice on how to do it.
这是代码,this.state包含来自我的API的字段切换Modal并使用react-table返回获取API
Here's the code, the this.state contains the fields from my APIToggle Modal and the fetch API to be returned using react-table
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>
<button className="btn btn-danger btn-sm" >Deletes </button>
</div>
)
},
],
},
]} defaultPageSize={10} defaultSorted={this.defaultSorted} className="-highlight" />
</div>
</div>
)}}
export default apitable
推荐答案
您可以定义状态变量并将其用于模式.
You can define state variable and use it in the modal.
this.state = {
selectedData:{},
tableData: [{
id: '',
email: '',
password: '',
modalDialog: false,
modalWithoutAnimation: false,
}],
};
并像下面一样传递选定的行数据
and pass selected row data like below
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>
<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>
这篇关于如何使用react将数据传递给Modal.编辑还是删除?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!