[英]Copy Text button function in React JS
I am working on project create-react-app create a some function in this project but copytext function not working issues mention in the below line of code.我正在处理项目 create-react-app 在这个项目中创建一些 function 但 copytext function 在下面的代码行中没有提到工作问题。 please check the issue...
请检查问题...
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 TextForm.js:16
Uncaught TypeError: Cannot read properties of null (reading 'Select')
There are some problems in your code:您的代码中存在一些问题:
text
and you don't need to get it by getElementById
and Select
.text
创建了 state 并且不需要通过getElementById
和Select
来获取它。writetext
doesn't exist in navigator.clipborad
. navigator.clipborad
中不存在writetext
。 It should be writeText
(it's case sensitive).writeText
(区分大小写)。state
in top of the component.state
。 So, move const [text, setText] = useState('');
const [text, setText] = useState('');
to top of your component.text
state doesn't have value
property. text
state 没有value
属性。 You can access its value just by text
.text
访问其值。 Here's the edited code:这是编辑后的代码:
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>
</>
)
}
You have text
value so You dont need to this你有
text
值所以你不需要这个
let text = document.getElementById("mybox");
text.Select();
So maybe just do like this所以也许只是这样做
navigator.clipborad.writetext(text);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.