Question

我有一个带有文本“添加到购物车”的按钮。单击后，文本应更改为“正在加载...”几秒钟。之后，文本应再次更改为“查看购物车”，并显示一条消息。

我知道我需要两次更改同一元素的状态，并且还使用某种标志来知道何时按钮文本更改为“查看购物车”以显示隐藏的消息，但是不确定最佳方法。

import React from 'react';

class ProductAddToCart extends React.Component {
 constructor(props) {
    super(props);
    this.state = {text: "Add to Cart"};
 }

 handleClick = () => {
    this.setState({ text: "Loading..." });
    //AFTER 2 SECONDS, CHANGE LOADING TEXT TO "VIEW CART" AND SHOW PARAGRAPH BELOW WITH "ITEM ADDED TO CART" MESSAGE NEXT TO BUTTON
 };

 render() {
    return (
        <div id="product-add-to-cart">
            <button type="button" className="btn btn-primary float-left" onClick={this.handleClick}>{this.state.text}</button>
            <p className="hidden">Item added to cart!</p>
        </div>
    );
 }
}

export default ProductAddToCart;

Answer 1

这可以通过使用setTimeout来实现，就像这样：

handleClick = () => {
    this.setState({ text: "Loading..." });
    setTimeout(() => {
        this.setState({ text: "view cart", showParagraph: true });
    }, 2000);
};

在p上：

<p className={this.state.showParagraph ? '' : 'hidden'}>...</p>

Answer 2

要让程序在更改文本之前等待2秒钟，可以使用setTimeout函数。

handleClick = () => {
    // your code
    setTimeout(() => {
        this.setState({text: 'View Cart', showSuccessMessage: true});
    }, 2000);
};

您可能还需要考虑更改render()方法中元素的隐藏和显示方式。一种这样的方式是仅在设置了状态变量的情况下才显示它（上面的showSuccessMessage）。我会做这样的事情：

render = () => {
    const {showSuccessMessage, text} = this.state;
    return (
        <div id="product-add-to-cart">
            <button type="button" className="btn btn-primary float-left" onClick={this.handleClick}>{text}</button>
            {showSuccessMessage ? <p>Item added to cart!</p> : null} // using the inline if/else format
        </div>
    );
};

Answer 3

就像其他答案一样，可以将其与setTimeout一起使用。但是我将在setState的回调中执行此操作，以确保状态已正确更改：

O(M^2)

单击更改状态，然后在延迟后再次更改并在React中显示消息

3 个答案: