React復(fù)制到剪貼板的示例代碼
更新時間：2017年08月22日 16:43:56 作者：你期待的花開
本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了React復(fù)制到剪貼板可以使用插件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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼
我們在開發(fā)過程中，經(jīng)常會出現(xiàn)下拉框數(shù)據(jù)很多得情況，本文主要介紹了react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
React是前端開發(fā)每天都用的前端框架，自然要深入掌握它的原理。我用?React?也挺久了，這篇文章就來總結(jié)一下我對?react?原理的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-07-07
用react實(shí)現(xiàn)一個簡單的scrollView組件
這篇文章主要給大家介紹一下如何用 react 實(shí)現(xiàn)一個簡單的 scrollView組件，文中有詳細(xì)的代碼示例，具有一定的參考價值,需要的朋友可以參考下2023-07-07
本文主要介紹了react中事件處理與柯里化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取條件競爭原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
分頁在很多地方都可以用到，本文主要實(shí)現(xiàn)了react分頁顯示，主要使用三個組件，父組件listBox、列表組件List、按鈕組件PageButton，感興趣的可以了解一下2021-08-08
React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn)的方法
這篇文章主要介紹了React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn),主要有兩種跳轉(zhuǎn)方式一種是編程式跳轉(zhuǎn)另一種是NavLink鏈接式跳轉(zhuǎn)，每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
在React面向組件編程中，除了上一章節(jié)的組件實(shí)例的三大核心屬性以外，還有很多重要的內(nèi)容比如：React 的生命周期，受控組件與非受控組件，高階函數(shù)和函數(shù)柯里化的理解等，在本文中會給大家繼續(xù)講解React 面向組件編程中剩余的內(nèi)容2023-03-03
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了Mixin、HOC、Render?Props、Hooks這四種組件間復(fù)用的方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-06-06