[英]copy text to clipboard react.js
我想在單擊時將文本復制到剪貼板。 我正在使用“將副本復制到剪貼板”組件。 但是由於狀態未定義和onCopy未定義,它顯示了一些錯誤。 這是我的代碼
import React from 'react';
import {GridList} from 'material-ui/GridList';
import Grid from '@material-ui/core/Grid';
import FontIcon from 'material-ui/FontIcon';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import Typography from '@material-ui/core/Typography';
import gradientDownloader from './gradientDownloader';
function downloadGrad(){
console.log('It is clicked');
}
export default function GradientCard(props){
state = {
value: '',
copied: false,
};
onCopy = () => {
this.setState({copied: true});
};
return(
<div style={styles.root}>
<Grid container spacing={0} style={{maxWidth: '1360px', margin: '0 auto', paddingTop: '80px'}}>
<Grid item lg={9} md={10} sm={12} xs={12}>
<GridList
cellHeight='auto'
cols = {4}
padding= {16}
style={styles.gridList}
>
{
props.data.map(grad => {
return(
<div style={styles.card} key={grad.name}>
<div id="gradColor" style={{background: 'linear-gradient(to right, '+grad.colors[0]+', '+grad.colors[1]+'', height: '100px', borderRadius: '4px'}}></div>
<div>
<CopyToClipboard onCopy={this.onCopy} text={this.state.value}>
<span style={styles.hexValue} value={this.state.value}>{grad.colors[0]}</span>
</CopyToClipboard>
<FontIcon className="material-icons" style={styles.iconStyles}>arrow_right_alt</FontIcon>
<span style={styles.hexValue}>{grad.colors[1]}</span>
</div>
<Typography style={{paddingTop: '16px'}}>{grad.name}</Typography>
<span onClick={downloadGrad}>DOWNLOAD</span>
</div>
)
})
}
</GridList>
</Grid>
<Grid item lg={3} md={2} sm={12} xs={12}>
<Typography style={styles.gridList}>HELLO WORLD</Typography>
</Grid>
</Grid>
</div>
)
};
是我使用過的組件。 我認為必須予以渲染。 如果返回前顯示了渲染,則顯示意外的令牌。 誰能幫我這個忙。
GradientCard
是一個Uncontrolled
組件,因此您不能在其中使用state
。 使它成為Controlled
組件。 希望它能工作!
你可以這樣嘗試
npm install --save react react-copy-to-clipboard
import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
class App extends React.Component {
state = {
value: '',
copied: false,
};
render() {
return (
<div>
<input value={this.state.value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<span>Copy to clipboard with span</span>
</CopyToClipboard>
<CopyToClipboard text={this.state.value}
onCopy={() => this.setState({copied: true})}>
<button>Copy to clipboard with button</button>
</CopyToClipboard>
{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
</div>
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);
請參考以下鏈接https://www.npmjs.com/package/react-copy-to-clipboard
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.