React復制到剪貼板的示例代碼
更新時間:2017年08月22日 16:43:56 作者:你期待的花開
本篇文章主要介紹了React復制到剪貼板的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了React復制到剪貼板可以使用插件copy-to-clipboard,分享給大家,具體如下:
安裝
npm install --save react react-copy-to-clipboard
使用
const App = React.createClass({
getInitialState() {
return {value: '', copied: false};
},
onChange({target: {value}}) {
this.setState({value, copied: false});
},
onCopy() {
this.setState({copied: true});
},
render() {
return (
<div>
<h1>CopyToClipboard</h1>
<input value={this.state.value} size={10} onChange={this.onChange} />
<CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
<span>Copy to clipboard with span</span>
</CopyToClipboard>
<CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
<button>Copy to clipboard with button</button>
</CopyToClipboard>
{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
<br />
<textarea style={{marginTop: '1em'}} cols="22" rows="3" />
</div>
);
}
});
const appRoot = document.createElement('div');
appRoot.id = 'app';
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
react+antd select下拉框實現(xiàn)模糊搜索匹配的示例代碼
我們在開發(fā)過程中,經(jīng)常會出現(xiàn)下拉框數(shù)據(jù)很多得情況,本文主要介紹了react+antd select下拉框實現(xiàn)模糊搜索匹配的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
用react實現(xiàn)一個簡單的scrollView組件
這篇文章主要給大家介紹一下如何用 react 實現(xiàn)一個簡單的 scrollView組件,文中有詳細的代碼示例,具有一定的參考價值,需要的朋友可以參考下2023-07-07
React-RouterV6+AntdV4實現(xiàn)Menu菜單路由跳轉的方法
這篇文章主要介紹了React-RouterV6+AntdV4實現(xiàn)Menu菜單路由跳轉,主要有兩種跳轉方式一種是編程式跳轉另一種是NavLink鏈接式跳轉,每種方式通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-08-08

