如何使用 React 将数据传递给 Modal。编辑还是删除？

Question

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

这是代码，this.state 包含我的 API 中的字段使用 react-table

切换 Modal 和要返回的 fetch 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>
)

row props

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

如何使用 React 将数据传递给 Modal。编辑还是删除？

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

modal-dialog

bootstrap-modal

reactjs

react-table