问题描述
如何在react中将焦点设置在contentEditable元素上? 我在子喷气机上发现了很多页面,但是无法正常工作。
示例代码:
import React,{ useRef,useEffect } from 'react';
const About = () => {
const inputRef = useRef(null);
useEffect(inputRef => {
if (inputRef) {
inputRef.focus();
}
},[]);
return (
<div className="about">
<h2>About</h2>
<p className="paragraph"
contentEditable={true}
suppressContentEditableWarning={true}
spellCheck={false}
ref={inputRef}
>
Hello
</p>
</div >
)
}
export default About;
解决方法
也许您可以使用它:
<textarea className="paragraph"
ref={inputRef}
value={yourValueState}
autofocus/>
,
好像是我的解决方案。
import React,{ useRef,useEffect } from 'react';
const About = () => {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
},[inputRef]);
return (
<div className="about">
<h2>About</h2>
<p className="paragraph"
contentEditable={true}
suppressContentEditableWarning={true}
spellCheck={false}
ref={inputRef}
>
Hello
</p>
</div >
)
}
export default About;