[英]Copy Text button function in React JS
我正在处理项目 create-react-app 在这个项目中创建一些 function 但 copytext function 在下面的代码行中没有提到工作问题。 请检查问题...
import React, {useState} from 'react'
export default function TextForm(props) {
const handleCopy = () => {
console.log("I am copy");
let text = document.getElementById("mybox");
text.Select();
navigator.clipborad.writetext(text.value);
}
const handleOnChange = (event) =>{
// console.log("on change");
setText(event.target.value);
}
const [text, setText] = useState('');
return (
<>
<div className='container'>
<h1>{props.heading} </h1>
<div className="mb-3">
<textarea className="form-control"
value={text} id="myBox" rows="8" onChange={handleOnChange}></textarea>
<button className="btn btn-primary mx-2 my-2" onClick={handleCopy}>Copy Text</button>
</div>
</div>
<div className="container my-3">
<h2>Your text summary</h2>
<p>{text.split(" ").length} Word and {text.length} Characters</p>
<p>{0.008 * text.split(" ").length} Minute Read</p>
<h3>Preview</h3>
<p>{text}</p>
</div>
</>
)
}
TextForm.js:16
Uncaught TypeError: Cannot read properties of null (reading 'Select')
您的代码中存在一些问题:
text
创建了 state 并且不需要通过getElementById
和Select
来获取它。navigator.clipborad
中不存在writetext
。 它应该是writeText
(区分大小写)。state
。 所以,移动const [text, setText] = useState('');
到您的组件顶部。text
state 没有value
属性。 您可以仅通过text
访问其值。这是编辑后的代码:
function TextForm(props) {
const [text, setText] = useState('');
const handleCopy = () => {
navigator.clipboard.writeText(text);
}
const handleOnChange = (event) =>{
setText(event.target.value);
}
return (
<>
<div className='container'>
<h1>{props.heading} </h1>
<div className="mb-3">
<textarea className="form-control"
value={text} id="myBox" rows="8" onChange={handleOnChange}></textarea>
<button className="btn btn-primary mx-2 my-2" onClick={handleCopy}>Copy Text</button>
</div>
</div>
<div className="container my-3">
<h2>Your text summary</h2>
<p>{text.split(" ").length} Word and {text.length} Characters</p>
<p>{0.008 * text.split(" ").length} Minute Read</p>
<h3>Preview</h3>
<p>{text}</p>
</div>
</>
)
}
你有text
值所以你不需要这个
let text = document.getElementById("mybox");
text.Select();
所以也许只是这样做
navigator.clipborad.writetext(text);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.