Преобразовать текст кнопки из «Копировать» в «Копировать», а затем через несколько секунд вернуться в «Копировать»

Question

Как конвертировать jQuery код в React JS?

У меня есть кнопка с текстом «Копировать». Когда я нажимаю на него, следует изменить его текст на «Скопировано» и скопировать в буфер обмена. После копирования через несколько секунд я хочу, чтобы текст go вернулся в «Копировать». Следующая функция будет работать, я верю. Я хочу включить эту функцию в код React.

$(function() {
  var $btnCopy = $('#copy-button');

  $btnCopy.on('click', function() {
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
      $btnCopy.text('Copied');

      setTimeout(function() {
        $btnCopy.text('Copy');
      }, 2000);
    });
  });
});

class CopyButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      copyText: 'Copy'
    };
  }

copyToClipboard = () => {
    this.setState({ copyText: 'Copied' });

    const textField = document.createElement('textarea');
    textField.innerText = JSON.stringify(this.props.content);
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
  };

render() {

    return (
      <Container>
        <Header>
          <Title>Testing</Title>
          {this.props.content ? (
            <Fragment>
              <Button primary text="Copy" onClick={this.copyToClipboard}/>
              <Button primary text="View" onClick={this.handleOpen} />
            </Fragment>
        </Header>
      </Container>

export default CopyButton;

Answer 1

setState принимает обратный вызов , который будет выполнен после обновления состояния, внутри обратного вызова вы можете использовать setTimeout , что-то вроде этого:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      copied: false
    }
  }

  copyToClipboard = () => {
    this.setState({copied: true}, () => {
      setTimeout( () => {
        this.setState({copied: false})
    }, 2000)
    })
  }
  render() {
    const btnText = this.state.copied ? 'Copied' : 'Copy'
    return (
      <button onClick={this.copyToClipboard}>
        {btnText}
      </button>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

Для получения дополнительной информации проверьте: https://reactjs.org/docs/react-component.html#setstate И Когда использовать React setState callback