javascript - 我怎样才能得到一个动态模式来映射我的卡片列表？

Question

每当我的程序运行时；卡片以正确的信息显示在屏幕上。但是当我点击按钮打开模态时；它显示不正确的信息，例如错误的事件标题或多个状态。

我的猜测是卡片是映射到屏幕上的实际对象；但是模态是一个实体，所以它显示了那个时间点的任何内容。我如何使用我的卡片映射正确映射模态，以便我可以动态地显示有关该特定卡片的模态信息？

class Events extends Component {

state = {
    creating: false
};

startCreateEventHandler = () =>
    this.setState({ creating: true });

modalCancelHandler = () => {
    this.setState({ creating: false });
}

componentDidMount() {
    this.ensureDataFetched();
}

ensureDataFetched() {
    this.props.requestEvents();
}





render() {
    return (
        <div>
        {this.props.events.map(event => 
        <React.Fragment> 
            {this.state.creating &&
                <Modal title="Add Event" canCancel onCancel= 
                   {this.modalCancelHandler}>
                    <p>{event.title}</p>
                    <p>{event.start}</p>
                    <p>{event.ticketRequests.map(request =>
                        request.status)}</p>
                    <p>heyyy</p>

                </Modal>
            }

            <Card color="blue" className="card" style={{ width: '18red' 
}}>
                <CardBody className="card-body">
                    <CardTitle>{event.title}</CardTitle>
                    <CardText>Event Info</CardText>
                    <button className="requestButton" 
                    color="yellow">Request Tickets</button>
                    <button className="claimButton" onClick= 
                    {this.startCreateEventHandler}>Tickets Claimed: 
                    </button>
                </CardBody>
                </Card> 
        </React.Fragment>  

        )}    
        </div>
    );
}  
}

模态文件

import React from 'react';
import './modal.css';

const modal = props => (
<div className="modal">
    <header className="modal_header">
        <h1>{props.title}</h1>
    </header>
    <section className="modal_content">{props.children}</section>
    <section className="modal_actions">

        {props.canCancel && (
            <button className="btn" onClick={props.onCancel}>
                Cancel
            </button>
        )}
    </section>
</div>

);

export default modal;

Answer 1

这里发生的是您同时打开所有模式。

您可以做的是将每个 event 的索引(或唯一 ID)保持在状态中，并且仅在索引/唯一 ID 匹配时才呈现模态。

class Events extends Component {

  state = {
    creatingId: -1
  };

  startCreateEventHandler = creatingId =>
    this.setState({ creatingId });

  modalCancelHandler = () => {
    this.setState({ creatingId: -1 });
  }

  componentDidMount() {
    this.ensureDataFetched();
  }

  ensureDataFetched() {
    this.props.requestEvents();
  }

  render() {
    return (
        <div>
        {this.props.events.map((event, i) => 
        <React.Fragment> 
            // the best way of doing it is with unique id property, but it also works with index
            // {this.state.creatingId == event.id &&
               {this.state.creatingId == i &&
                <Modal title="Add Event" canCancel onCancel= 
                   {this.modalCancelHandler}>
                    <p>{event.title}</p>
                    <p>{event.start}</p>
                    <p>{event.ticketRequests.map(request =>
                        request.status)}</p>
                    <p>heyyy</p>

                </Modal>
            }

            <Card color="blue" className="card" style={{ width: '18red' }}>
                <CardBody className="card-body">
                    <CardTitle>{event.title}</CardTitle>
                    <CardText>Event Info</CardText>
                    <button className="requestButton" 
                    color="yellow">Request Tickets</button>
                    <button className="claimButton" onClick= 
                    {() => this.startCreateEventHandler(i)}>Tickets Claimed: 
                    </button>
                </CardBody>
                </Card> 
        </React.Fragment>  

        )}    
        </div>
    );     
  }  
}