检测哪个输入是聚焦的 React 钩子

Question

我正在使用 React Hooks。我想检查哪个输入是集中的。我有一个动态生成的输入对象。输入将被选中，我想要一个按钮，该按钮将附加一个值到焦点输入。

Answer 1

(编辑( 使用 React Hook 更新为更好的解决方案

我遇到的大多数解决方案都没有考虑到表单没有活动元素的情况。因此，我想出了以下钩子来涵盖这种情况。

const useActiveElement = () => {
const [listenersReady, setListenersReady] = React.useState(false); /** Useful when working with autoFocus */
const [activeElement, setActiveElement] = React.useState(document.activeElement);
React.useEffect(() => {
const onFocus = (event) => setActiveElement(event.target);
const onBlur = (event) => setActiveElement(null);
window.addEventListener("focus", onFocus, true);
window.addEventListener("blur", onBlur, true);
setListenersReady(true);
return () => {
window.removeEventListener("focus", onFocus);
window.removeEventListener("blur", onBlur);
};
}, []);
return {
activeElement,
listenersReady
};
};

https://codesandbox.io/s/competent-thunder-59u55?file=/src/Form.js

这应该使您更容易检测哪个表单输入处于活动状态。

Answer 2

尝试在焦点和焦点丢失时添加事件。

W3学校参考

<input type="text" onFocus="this.props.onFocus()" onFocusOut="this.props.lostFocus()">

Answer 3

您可以使用onFocus事件。

function handleFocus(e) {
// logic here
}
<input onFocus={handeFocus} />

如果要更改输入值，还可以使用onChange事件和value属性。

const [value, setValue] = useState('')
function handleChange(e) {
setValue(e.target.value)
}
function handleFocus(e) {
// logic here
setValue('input focused')
}
<input value={value} onChange={handleChange} onFocus={handeFocus} />

Answer 4

希望这对:)有所帮助

import React,{useRef} from "react";
import "./styles.css";
export default function App() {
const  inputRef = useRef();
const onButtonClick=()=>{
inputRef.current.focus();
}

return (
<div className="App">
<input type="text" value="" ref={inputRef}/>
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}