将按钮的文本从'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 和 何时使用 React setState 回调