How can I pass data to Modal using react. Edit or Delete?

问题

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.

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

回答1:

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>
                        )

inside modal

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

回答2:

Just taking a stab here. Normally with working with arrays in react and you want to operate on an entry, then you pass in a callback the index of the element you want to work with.

Create a new onClick handler that sets the index you want to edit and toggles the modal open

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

Update the onClick callback

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>
)

row props

Then pass this.state.tableData[this.state.editIndex] to the modal

来源：https://stackoverflow.com/questions/59924019/how-can-i-pass-data-to-modal-using-react-edit-or-delete