如何在 React.js 中的计时器计数 === 0 时设置按钮不可见？

Question

I am new in React.js and I have a question.

I want to send a feedback by button click. It is sending via axios request with timeout 3 seconds.

I put Cancel button if user wants to cancel sending feedback for this timeout (3 seconds) - (and axios request is being cancelled as well).

Then, I put timer on button, but it is situated under text even I use <span> . I attached code to codesandbox . Now it is test mode, just need to fix:

• time above text - it needs to be in left of the text.
• cancel function is also received wrongly as a props because of console messages (it doesn't cancel parent's state).
• I need Cancel button to be show to 0 count, so I need to unmount button when it is 0 and hide it.

Any help will be appreciated. Thanks!

Answer 1

  doIntervalChange = () => {
    if (this.state.count === 0) {
      this.hide();
    }
    this.myInterval = setInterval(() => {
      this.setState(
        prevState => ({
          count: prevState.count - 1
        }),
        () => {
          if (this.state.count === 0) this.hide();
        }
      );
    }, 1000);
  };

doIntervalChange just run 1 time when you place it in comp did mount , try this code :D

Answer 2

You have two make two changes here,

1) In send.js file make changes in following under sendApi() method,

setTimeout(() => {
  this.setState({
    isLoading: false
  });
  console.log("Ok");
}, 4000);

As the cancel button is populated only when isLoading is true, you can make it to false inside sendApi() method after the setTimeout to remove it after the given time.

2) To make the timer count and cancel text to stay in line of the button,

Under timer.js change the return statement under render() method like,

return (
  <React.Fragment>{count}</React.Fragment>
);

Forked sandbox