Saya baru bereaksi

Saya membuat kartu gambar sederhana yang setelah diklik, modal akan ditampilkan.

    state = {
      test_people: [
        {
           name: 'John Doe',
           occupation: 'Full Stack Developer',
           details: 'Lorem ipsum..'
        },
        {
           name: 'Mary Jane',
           occupation: 'Front-End Developer',
           details: 'Lorem ipsum..'
        },
        {
           name: 'James Green',
           occupation: 'Back-End Developer',
           details: 'Lorem ipsum..'
        },
      ]
    },

    constructor(props) {
        super(props);
        this.showModal = this.showModal.bind(this);
    }

    showPop(key) {
      let people_details = document.getElementsByClassName('')[key];
    }

    render() {

      const test_people = [...this.state.test_people];

      // image card
      <div className="container">
        {
          test_people.map( ( tp, i ) =>
            <div className="card_people" onClick={ () => this.showPop(i) } key={ i }>
            <p>{ tp.name }</p>

            </div>
          )
        }
      </div>

      // for modal
      <div className="container">
        // other person details will show here
      </div>
    }

Saya ingin meneruskan array ke div lain, apakah mungkin? Setelah saya mengklik nama sebuah modal akan muncul dan menampilkan detail lainnya.

Ada saran? itu akan dihargai

1
happy 20 Agustus 2019, 08:27

1 menjawab

Jawaban Terbaik

Anda dapat mencoba pendekatan ini // backdrop css

 .Backdrop {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

//Komponen KontenModal

const ModalContent = (props)=>{
        return (
            <div style={{textAlign: 'center'}}>
             {/*   <h3 style={{color: '#008000'}}>Success</h3>*/}
                <b><h2 style={{color: '#008000'}}>{props.title}</h2></b>
                <h4 style={{color: '#008000'}}>{props.details}</h4>
            </div>
        )}

//Modal Komponen

   const Modal = ( props ) => (
                <Aux>
                    <Backdrop show={props.show} clicked={(e)=>props.modalClosed(false)} />
                    <div
                        className={"Modal"}
                        style={{
                            transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                            opacity: props.show ? '1' : '0'
                        }}>
                        {props.children}
                    </div>
                </Aux>
            );

// kode

    constructor(props){
            super(props);
            this.state = {
                test_people: [
                    {
                        name: 'John Doe',
                        occupation: 'Full Stack Developer',
                        details: 'Lorem ipsum..'
                    },
                    {
                        name: 'Mary Jane',
                        occupation: 'Front-End Developer',
                        details: 'Lorem ipsum..'
                    },
                    {
                        name: 'James Green',
                        occupation: 'Back-End Developer',
                        details: 'Lorem ipsum..'
                    },
                ],
                modal: false
            }
            this.showModal = this.showModal.bind(this);
        }
         modalHandler = (props)=> {
            this.setState((state)=>({
                modal: props
            }));
        };
        showPop = (key)=> {
            let people_details = document.getElementsByClassName('')[key];
        }
        render() {
            const test_people = [...this.state.test_people];
            let array =   test_people.map( ( tp, i ) => {
                return <div className="card_people" onClick={() => this.showPop(i)} key={i}>
                    <p>{tp.name}</p>
                </div>
            }
        )
            // image card
            return(
                <React.fragment>
                <div className="container">   {array}  </div>
                 //for modal
<Modal show={this.state.modal} modalClosed={this.modalHandler}>
                                    <ModalContent
                                        status={this.state.axiosStatus.status}
                                        title={this.state.axiosStatus.title}
                                        details= 
 {this.state.axiosStatus.details}
                                    />
                                </Modal>
                <div className="container">
                // other person details will show here
                    {array}
                </div>
                </React.fragment>
        )}
0
king neo 20 Agustus 2019, 14:03