将相对数据从映射数组发送到模式吗？

Question

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

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

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

    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

单击按钮后，您可以将其设置为状态并可以在模态内部访问。 首先，将其v -> "Some Reason"内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
        }); 
}