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

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

0 голосов
/ 21 июня 2020

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

Ответы [ 3 ]

0 голосов
/ 21 июня 2020

Вы можете использовать событие 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} />
0 голосов
/ 21 июня 2020

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

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>
  );
}
0 голосов
/ 21 июня 2020

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

Справочник W3Schools 

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