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