Дочерний компонент не отображается в реакции JS - PullRequest
Новая
       5

Дочерний компонент не отображается в реакции JS

0 голосов
/ 24 сентября 2018

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

 getAssetDocId(e) {
        var assetDocId = e.currentTarget.attributes['id'].value;
        var assetDBId = e.currentTarget.attributes['dbId'].value;
        var code = e.currentTarget.attributes['code'].value;

        console.log('----------------------------------------------------');
        return <ModalContainer assetDocId={assetDocId} assetDBId={assetDBId} code={code} defaultValues={this.props.defaultValues} allAssetDetails={this.props.allAssetDetails} />
     }

с именем 

<div className="card-overlay modal-trigger"  data-target="asset-detail" id={asset.docId} dbId={asset.dbId} code={asset.code} key={asset.docId} onClick={this.getAssetDocId}>

Дочернийкомпонент - 

import React, { Component } from 'react';
import {Button, Icon, Row, Col, Carousel, Chip, Collapsible, CollapsibleItem, Input, Dropdown, NavItem, Form, Modal} from 'react-materialize';
import AssetDetails from './../assetlisting/assetdetails.jsx';

class ModalContainer extends Component {
    constructor(props) {
        super(props);
        this.resetValues = this.resetValues.bind(this);
        this.resetAssetValues = React.createRef();
        this.renderAssetDetails = this.renderAssetDetails.bind(this);
    }

    renderAssetDetails() {

        return <AssetDetails assetDocId={this.props.assetDocId} assetDBId={this.props.assetDBId} code={this.props.code} defaultValues = {this.props.defaultValues} ref={this.resetAssetValues} allAssetDetails={this.props.allAssetDetails}/>;
    }

    resetValues = () => {
        this.resetAssetValues.current.showInfo();
    };

    render() {
        console.log('ppppppppppppppppppppppppppppppp');

        return (
            <div>
                <Modal id="asset-detail" className="fullscreen"
                       modalOptions={{preventScrolling: true}}>
                    <div className="modal-content">
                        <div className="asset-details">
                            <div className="modal-close waves-effect" onClick={this.resetValues}>
                                <i className="material-icons">close</i>
                            </div>
                            { this.renderAssetDetails() }
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}
export default ModalContainer;

Может кто-нибудь указать, в чем здесь проблема?

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018
Метод

onClick ничего не делает с возвращаемым значением, поскольку вы возвращаете модальный контейнер из метода getAssetDocId, он не будет работать, вместо этого вам нужно установить состояние и отобразить ModalContainer на основе состояниязначение 

getAssetDocId(e) {
        var assetDocId = e.currentTarget.attributes['id'].value;
        var assetDBId = e.currentTarget.attributes['dbId'].value;
        var code = e.currentTarget.attributes['code'].value;
        this.setState({
            assetDocId, 
            assetDBId,
            code,
            showModal: true
        })
     }

render() {
    const { assetDocId, assetDBId, code, showModal } = this.state;
    return (
       <React.Fragment>
           <div className="card-overlay modal-trigger"  data-target="asset-detail" id={asset.docId} dbId={asset.dbId} code={asset.code} key={asset.docId} onClick={this.getAssetDocId}>
           {showModal && <ModalContainer assetDocId={assetDocId} assetDBId={assetDBId} code={code} defaultValues={this.props.defaultValues} allAssetDetails={this.props.allAssetDetails} />}
       </React.Fragment>
    )
}
0 голосов
/ 24 сентября 2018

Вам необходимо сделать так, чтобы дочерний компонент был

. Проверьте код ниже для лучшего понимания.Вот как вы можете реализовать свою функциональность 

constructor(props){
   super(props);
   this.state = {
      assetDocId: "",
      assetDBId: "",
      code: "",
      showModalContainer: false
   }
}

getAssetDocId = e => {
     this.setState({
        assetDocId:e.currentTarget.attributes['id'].value,
        assetDBId: e.currentTarget.attributes['dbId'].value,
        code: e.currentTarget.attributes['code'].value,
        showModalContainer: true
     })
}

render(){
    const {assetDocId, assetDBId, code, showModalContainer} = this.state;
    return(
      <div>
        {showModalContainer && <ModalContainer assetDocId={assetDocId} assetDBId={assetDBId} code={code} defaultValues={this.props.defaultValues} allAssetDetails={this.props.allAssetDetails} />}
      </div>
    )
}

Есть много способов сделать то же самое.

...