React Modals 在单击按钮时立即显示

Question

反应新手。 我已经看过以前的 SO 建议，但它们对我在这里遵循的模式没有帮助。 请谁能告诉我我如何确定单击的按钮仅触发此代码中的相应模式？ 我想要一些有关此代码工作的帮助，因为将它拼凑在一起需要一段时间，而且我了解这里发生的一些事情。 有经验的编码人员会在这里看到我的小步骤。 谢谢。

This is the returned json

{
    "cakes": [
        {
            "id": 1,
            "text": "Fruit Sponge Layer Cake",
            "comment": "Real fruit - strawberries, Victoria Sponge and cream",
            "image": "./assets/fruitLayerSponge.jpg",
            "alt": "Fruit Sponge",
            "yum": 1,
            "name": "fruitSponge"
        },
        {
            "id": 2,
            "text": "Chocolate Muffin",
            "comment": "Chocolate mix, chocco chips and cream",
            "image": "./assets/chocoMuffinsWCream.jpg",
            "alt": "Chocco Muffin",
            "yum": 3,
            "name": "choccoMuffin"
        },
        {
            "id": 3,
            "text": "Strawberry Cheesecake",
            "comment": "Cheesecake with strawberry cream",
            "image": "./assets/strawberryCheesecake.jpg",
            "alt": "Cheesecake",
            "yum": 2,
            "name": "cheesecakeStrawberry"

        }
    ]
}

This is the React Component - AsyncAwaitLocalhost.jsx

import React from 'react';
import "./App.css"
import { Modal, Button } from "react-bootstrap";

class AsyncAwaitLocalhost extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            jsonContent: [],
            greeting: "string",
            newGreeting: "Hello",
            isOpen: false
        };
    }


    async componentDidMount() {
        // GET request using fetch with async/await
        const response = await fetch('http://localhost:8080/cakes');
        const data = await response.json();
        this.setState({ jsonContent: data.cakes, greeting: this.state.greeting, newGreeting: this.state.newGreeting })

    }

    openModal = () => this.setState({ isOpen: true });

    closeModal = () => this.setState({ isOpen: false });

    render() {
        const { jsonContent } = this.state;
        const { greeting } = this.state;
        const { newGreeting } = this.state;
        this.state.greeting = "Hello greeting";
        this.state.newGreeting = "Hi new greeting";
        console.log("greeting: " + greeting);
        console.log("newGreeting: " + newGreeting);

        // the inline JSX render component definition
        const Cake = ({ name, id, text, image, comment, dbutton, dmodal }) => (
            <div>
                <img src={image} width="120px" alt={name}/>
                <div>
                    <p>{name}</p>
                    <p>{text}</p>
                    <p>{comment}</p>
                    <p>{id}</p>
                    <div>{dbutton}</div>
                    <p>&nbsp;</p>
                    <div id="dModal" className="dModalClosed">{dmodal}</div>
                    <p>&nbsp;</p>
                </div>
            </div>
        );

        return (

            <div className="card text-center m-3">
                <h5 className="card-header">See Cakes</h5>
                <div className="card-body">
                    <div>
                        {this.state.jsonContent.map((cake, index) => (
                            <Cake
                                name={`${cake.id} ${cake.name}`}
                                image={cake.image}
                                text={cake.text}
                                comment={cake.comment}
                                key={index}
                                dbutton={<Button onClick={this.openModal}>See more {cake.id}</Button>}
                                dmodal={
                                    <Modal id={cake.name} show={this.state.isOpen} onHide={this.closeModal}>
                                        <Modal.Header closeButton>
                                            <Modal.Title>{cake.text}</Modal.Title>
                                        </Modal.Header>
                                        <Modal.Body>name={`${cake.id} ${cake.name}`}
                                            image={cake.image}
                                            text={cake.text}
                                            comment={cake.comment}
                                        </Modal.Body>
                                        <Modal.Footer>
                                            <Button variant="secondary" onClick={this.closeModal}>
                                                Close
                                            </Button>
                                        </Modal.Footer>
                                    </Modal>
                                }
                            />
                        ))}
                        <div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export { AsyncAwaitLocalhost };

Answer 1

因为您正在使用布尔值来控制所有模态的打开。 您需要使用 id/index 来控制：

this.state = {
  isOpen: null
};
...
onClick={this.openModal(index)}
...
openModal = (index) => () => this.setState({ isOpen: index });
closeModal = () => this.setState({ isOpen: null });
...
show={this.state.isOpen === index}

Answer 2

这些行都在AsyncAwaitLocalhost的状态上更改isOpen 。

openModal = () => this.setState({ isOpen: true });

closeModal = () => this.setState({ isOpen: false });

当this.state.isOpen为 true 时，您的所有模态都设置为显示：

<Modal id={cake.name} show={this.state.isOpen} onHide={this.closeModal}>

所以，当你设置this.state.isOpen对你的真正AsyncAwaitLocalhost ，因为当你调用发生openModal()所有的情态动词的会显示。

您应该将模态分解成它们自己的组件并将其存储在单个模态的状态中，或者在某处存储一个 ID，告诉您的代码要打开哪个模态。