Javascript 将按钮的文本从'；复印件'；至'；复制'；然后回到'；复印件'；几秒钟后

如何将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扩展组件{
建造师（道具）{
超级（道具）；
此.state={
copyText:“复制”
};
}
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（）{
返回(
测试
{this.props.content(
导出默认复制按钮；

设置状态接受更新状态后将执行的回调，在回调中，您可以使用设置超时，如下所示：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
抄袭：假
}
}
copyToClipboard=（）=>{
this.setState（{copied:true}，（）=>{
设置超时（（）=>{
this.setState（{copied:false}）
}, 2000)
})
}
render（）{
const btnText=this.state.copied？'copied'：'Copy'
返回(
{btnText}
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)；

---

设置状态接受更新状态后将执行的回调，在回调中，您可以使用设置超时，如下所示：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
抄袭：假
}
}
copyToClipboard=（）=>{
this.setState（{copied:true}，（）=>{
设置超时（（）=>{
this.setState（{copied:false}）
}, 2000)
})
}
render（）{
const btnText=this.state.copied？'copied'：'Copy'
返回(
{btnText}
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)；

hey bro你可以试试这个如何在状态下设置超时这里有一篇帖子可以帮助你hey bro你可以试试这个如何在状态下设置超时这里有一篇帖子可以帮助你

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;