Как я могу передать данные в модал с помощью реакции. Редактировать или Удалить?

Question

Я хочу передать данные модальной, когда нажата кнопка редактирования, например, идентификатор, электронная почта и пароль. Просто начал с реакции. Я использую API здесь. Как я могу сделать это, кажется, это сильно отличается, когда я использую laravel или другие pl. Надеюсь на некоторую помощь и совет, как это сделать.

Вот код, this.state содержит поля из моего API Toggle Modal и 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

Просто сделаю удар здесь. Обычно при работе с массивами в реагировать, и вы хотите работать с записью, затем вы передаете в обратный вызов индекс элемента, с которым вы хотите работать.

Создайте новый обработчик 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] модальному