javascript - 将按钮的文本从 'Copy' 转换为 'Copied'，几秒钟后又转换回 'Copy'

Question

如何将 jQuery 代码转换为 React JS？

我有一个带有文本“复制”的按钮。当我单击它时，应将其文本更改为“已复制”并复制到剪贴板。复制后，几秒钟后我希望文本返回到“复制”。我相信以下功能将会起作用。我想通过 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和 When to use React setState callback