React在外部点击时用另一个元素替换一个元素

Question

所以我试图在单击时用输入替换span，然后在按下输入键或用户单击外部时替换回来。下面是我的代码:

const input = useRef<HTMLInputElement>(null);
const span = useRef<HTMLSpanElement>(null);
const [ titleVisible, setTitleVisible ] = useState(true);
const [ title, setTitle ] = useState('title');
const close = (value: string) => {
setTitle(value.trim());
setTitleVisible(true);
}
onclick = e => {
if (!titleVisible && e.composedPath()[0] !== input.current) {
setTitleVisible(true);
}
}
useEffect(() => {
if (span.current) {
span.current.onclick = () => {
setTitleVisible(false);
}
} else {
input.current!.value = title;
input.current!.onkeyup = e => {
if (e.key === 'Enter') close(input.current!.value);
}
}
}, [titleVisible]);

return (
<div className="topInfo">
{ titleVisible ? <span ref={span}>{title}</span> : <input type="text" ref={input} /> }
</div>
);

提前感谢!

Answer 1

这是一种达到你想要的效果的方法

const [isEditing, setIsEditing] = useState(false);
const [text, setText] = useState('Click to edit');
const inputRef = useRef(null);
function handleClick() {
setIsEditing(true);
}
function handleBlur(event) {
setIsEditing(false);
setText(event.target.value);
}
function handleKeyDown(event) {
if (event.key === 'Enter') {
setIsEditing(false);
setText(event.target.value);
}
}
useEffect(() => {
if (isEditing) {
inputRef.current.focus();
}
}, [isEditing]);
return (
<div>
{isEditing ? (
<input
ref={inputRef}
type="text"
defaultValue={text}
onBlur={handleBlur}
onKeyDown={handleKeyDown}
/>
) : (
<span onClick={handleClick}>{text}</span>
)}
</div>
);