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

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

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

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;

从“React”导入React；
类ProductAddToCart扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={text:“添加到购物车”}；
}
handleClick=（）=>{
this.setState（{text:“加载…”}）；
//2秒钟后，将加载文本更改为“查看购物车”，并在按钮旁边显示带有“项目已添加到购物车”消息的段落
};
render（）{
返回(
{this.state.text}
商品已添加到购物车
);
}
}
导出默认ProductAddToCart；

这可以通过使用setTimeout来实现，如下所示：

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

在p：

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

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

设置超时

功能

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

您可能还想考虑如何在<代码> ReDead（）/<代码>方法中隐藏和显示元素。这样做的一种方法是仅在设置状态变量时显示它（

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>
    );
};

render=（）=>{
const{showsccessmessage，text}=this.state；
返回(
{text}
{showSuccessMessage？项目已添加到购物车！
：null}//使用内联if/else格式
);
};

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

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

---

在将值设置为“加载”后，是否真的要在单击时进行一些处理？我通常会将

isLoading

属性添加到我的状态，然后在我的函数中，我会将

isLoading

的状态值设置为true，然后在函数结束时再次将其设置为false，然后您可以简单地使用三元运算符切换文本