javascript - 将映射数组中的相关数据发送到模态？

Question

所以我将数组中的数据映射到一个轮播中，总共创建了 20 个轮播项目。每个元素都有嵌入其中的“相同”按钮。当单击该按钮时，我想将每个元素的相关数据发送到模式中，老实说，我什至不知道从哪里开始。

这是我目前用于此组件的代码：

编辑：突出显示我想传递给相关模式的数据。

    import React from 'react';
    import {connect} from 'react-redux';
    import Slider from 'react-slick';
    import Modal from 'react-modal';

    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

    import { fetchActionM } from '../../store/actions/moviepageActions';

    const img_url = 'https://image.tmdb.org/t/p/original';

    const customStyles = {
        content : {
          top                   : '50%',
          left                  : '50%',
          right                 : 'auto',
          bottom                : 'auto',
          marginRight           : '-50%',
          transform             : 'translate(-50%, -50%)',
          color                 : 'white',
          background: '#080a0a none repeat scroll 0% 0%',
          width: '600px',
        }
    };

    Modal.setAppElement('#root')

    class ActionMov extends React.Component{
        constructor() {
            super();

            this.state = {
                modalIsOpen: false
            };

            this.openModal = this.openModal.bind(this);
            this.afterOpenModal = this.afterOpenModal.bind(this);
            this.closeModal = this.closeModal.bind(this);


        }

        openModal() {
            this.setState({modalIsOpen: true});
        }

        afterOpenModal(){
            this.subtitle.style.color = '#f00';
        }

        closeModal(){
            this.setState({modalIsOpen: false});
        }

        render(){
        //send same mapped data from this into the modal when clicked on the button <FontAwesomeIcon onClick....
        let action;
        if(this.props.action.length > 0){
            action = this.props.action[0].results.map(ac => (
                <div className='sliderbox' key={ac.id}>
                    <div className='text-block'>
                        <h5 className='sliderTitle'>{ac.title}</h5>
                        <FontAwesomeIcon onClick={() => this.openModal({ac})} icon="plus-circle" className='sliderIcon' />

{/* I need same data from these two be passed into the relative modal */}

                        <p className='sliderRelease'>{ac.release_date}</p>
                        <p className='sliderVote'>{ac.vote_average}</p>

{/* Just highlighting this area */}

                    </div>
                    <img className='sliderImg' src={`${img_url}${ac.poster_path}`} alt={ac.title} />
                </div>
            ));
        }

        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 6,
            slidesToScroll: 3,
            draggable: true,
        };
            return (
                <div>
                    <Slider {...settings}>
                        {action}
                    </Slider>
                    <Modal
                    isOpen={this.state.modalIsOpen}
                    onAfterOpen={this.afterOpenModal}
                    onRequestClose={this.closeModal}
                    style={customStyles}
                    contentLabel='Movies modal'
                    >
                    {
                        //Would like to print relative data here
                    }
                    <h2 ref={subtitle => this.subtitle = subtitle}>TITLE GOES HERE</h2>
                        <div>
                        <p>Id: {`<id goes here>`}</p>
                        <h5 className='modalRelease'>Released: {`<release date goes here>`}</h5>
                        <h5 className='modalVote'>Rating: {`<rating goes here>`}</h5>
                        </div>
                    <button className='modalClose' onClick={this.closeModal}>X</button>
                    </Modal>
                </div>
            )
        }
    }

    const mapStateToProps = (state) => {
        return {
            action: state.movies.actions
        }
    }

    export default connect(mapStateToProps)(ActionMov);

Answer 1

单击按钮后，您可以将其设置为状态并可以在模式内部访问。首先让我们initialize在里面constructor

constructor() {
        super();
        this.state = {
            modalIsOpen: false,
            movie: {
               id: '', release: '', rating: ''
        }
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);


}

现在让我们在事件上设置它onClick，您实际上是将对象传递给openModal方法

openModal(movie) {
        this.setState({
           modalIsOpen: true,
           movie: movie
        }); 
}

现在您可以在模态框内访问它了

<Modal
    isOpen={this.state.modalIsOpen}
    onAfterOpen={this.afterOpenModal}
    onRequestClose={this.closeModal}
    style={customStyles}
    contentLabel='Movies modal'
>
    {
        //Would like to print relative data here
    }
    <h2 ref={subtitle => this.subtitle = subtitle}>TITLE GOES HERE</h2>
    <div>
        <p>Id: {this.state.movie.id}</p>
        <h5 className='modalRelease'>Released: {this.state.movie.release}</h5>
        <h5 className='modalVote'>Rating: {this.state.movie.rating}</h5>
    </div>
    <button className='modalClose' onClick={this.closeModal}>X</button>
</Modal>