Определение того, какой ввод сфокусирован, перехватчики React

Question

Я использую React Hooks. Я хочу проверить, на каком вводе сделан акцент. У меня есть объект динамически генерируемых входов. Будут выбраны входы, и я хочу иметь кнопку, которая добавит значение к входу, находящемуся в фокусе.

Answer 1

Вы можете использовать событие 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 2

Надеюсь, это поможет :)

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>
  );
}

Answer 3

Попробуйте добавить события в Focus и Focus Lost.

Справочник W3Schools

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