Question

编程新手，如果无法正确输入措辞，我们感到抱歉。我正在使用.map渲染并列出数组中的每个项目。对于每个项目，我希望模态仅打开/关闭与数组中每个项目相对应的特定模态。但是，当我单击按钮打开模态时，每一个都会打开和关闭。我相信这是因为模态都一起设置为开/关按钮。如何设置它（使用.map value.id之类的东西），以便仅打开和关闭特定模式？

password=str(input("Please enter a password with more than 4 digits, and it should only be letters:"))
score=0
keyboard={'Q':1,'q':1,'W':2,'w':2,'E':3,'e':3,'R':4,'r':4,'T':5,'t':5,'Y':6,'y':6,'U':7,'u':7,'I':8,'i':8,'O':9,'o':9,'P':10,'p':10,'A':12,'a':12,'S':13,'s':13,'D':14,'d':14,'F':15,'f':15,'G':16,'g':16,'H':17,'h':17,'J':18,'j':18,'K':19,'k':19,'L':20,'l':20,'Z':22,'z':22,'X':23,'x':23,'C':24,'c':24,'V':25,'v':25,'B':26,'b':26,'N':27,'n':27,'M':28,'m':28}
for n in range ((len(password))-2):
    if (int(password[n+1])-int(password[n])==1) and (int(password[n+2])-int(password[n+1]==1)):
        score=score-5
        print(score)

Answer 1

从您共享的代码中，我看到您正在处理具有相同状态值（即Model）的所有show。这将导致所有Models的所有状态均为true，因此如图所示，它们的所有状态。

要解决此问题，您可以将整个组件提取到新的React类中，该类仅具有根据独立状态显示Modal的功能。因此，您的新React组件将如下所示：

class DrinkComponent extends React.Component {
    constructor(props) {
        super(props);
        this.handleHide = this.handleHide.bind(this);
        this.state = {
            show: false,
        }
    }
    handleHide() {
        this.setState({ show: false });
    }
    render() {
        const { drink } = this.props;
        return (<div key={drink.id}>
            <h5>{drink.name}</h5>
            <h6>${drink.price}</h6>
            <span
                onClick={() => this.setState({ show: true })}
            >
                <strong>More Info</strong>
                <br />
                <button onClick={() => this.props.addToCart(drink)}>Add to Order</button>
            </span>
            <Modal
                show={this.state.show}
                onHide={this.handleHide}
                container={this}
                aria-labelledby="contained-modal-title"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title">
                        {drink.name}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>{drink.sub_category} | ABV {drink.abv}% | {drink.origin}</p>
                    <Col xs={6} md={4}>
                        <Image className="drink-logo" src={drink.logo} thumbnail />
                    </Col>
                    <p className="drink-description"><strong>Description</strong><br />{drink.description}</p>
                    <p href={drink.website}>Website</p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.handleHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        </div>);
    }
}

在这种情况下，每个DrinkComponent将具有其独立的显示和隐藏模型状态。现在，我们只需要修改render中现有的DrinkMenu函数，以显示DrinkComponent。因此，您的render函数将如下所示：

render() {
        let drinkList = this.props.drinkMenu.map((drink) => (<DrinkComponent drink={drink} addToCart={this.addToCart}/>));
        return (
            <div>
                <h2>Drink Menu</h2>
                <div>
                    {drinkList}
                </div>
            </div>
        )
    }

您还可以从state中删除节目DrinkMenu，因为在那里不需要。希望对您有所帮助。

当我通过列表映射时，React-bootstrap Modal组件打开/关闭所有模态

1 个答案: