如何使用react将数据传递给Modal.编辑还是删除? [英] How can I pass data to Modal using react. Edit or Delete?

问题描述

我想在单击按钮编辑时将数据传递给模式，例如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 API Toggle 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>&nbsp;
                                <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>&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>

这篇关于如何使用react将数据传递给Modal.编辑还是删除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！