Как передать данные в модал с помощью React / Next.js? - PullRequest
Новая
       5

Как передать данные в модал с помощью React / Next.js?

0 голосов
/ 05 февраля 2019

У меня есть таблица, и когда пользователь нажимает на строку в таблице, я хочу показать данные строки на модальной диаграмме.Затем пользователь сможет редактировать эти данные и затем обновлять их на сервере.

Я использую Next.js для создания веб-сайта и пробовал много разных решений React, но ни одно из них, похоже, не работает.Я ищу твердое, простое решение.

1 Ответ

0 голосов
/ 05 февраля 2019

Я бы предложил использовать модальный компонент многоразового использования в этом сценарии, я делаю что-то подобное в моем проекте.

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

React очень мощный, нам просто нужно знать, как его использовать !!

Модальный компонент 

import React, { Component } from 'react';

import classes from './Modal.css';
import Aux from '../../../hoc/Auxiliary/Auxiliary';
import Backdrop from '../Backdrop/Backdrop';

class Modal extends Component {

    shouldComponentUpdate ( nextProps, nextState ) {
        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
    }

    render () {
        return (
            <Aux>
                <Backdrop show={this.props.show} clicked={this.props.modalClosed} />
                <div
                    className={classes.Modal}
                    style={{
                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.props.show ? '1' : '0'
                    }}>
                    {this.props.children}
                </div>
            </Aux>
        )
    }
}

export default Modal;

Фоновый компонент 

import React from 'react';

import classes from './Backdrop.css';

const backdrop = (props) => (
    props.show ? <div className={classes.Backdrop} onClick={props.clicked}></div> : null
);

export default backdrop;

Ну, не запутайтесь насчет Вспомогательного, это просто HOC которые избегают добавления дополнительной оболочки div

Вспомогательный HOC 

const Aux = (props) => props.children;

export default Aux;
...