Делать onBlur при нажатии Enter

Question

Как сделать, чтобы убирался фокус у поля ввода при нажатии клавиши Enter?

import React, {useState} from 'react';

const TodoInput = (props) => {
   const defaulTitle = 'Здесь будет ваша задача';

   const [todoString, setTodoString] = useState('');
   const [inputValue, setInputValue] = useState('');

   const handleOnBlurInputTitle = (evt) => {
      const { value } = evt.target;
      if (value.trim()){
         setTodoString(value);
         setInputValue('');
         return;
      }
      setTodoString(defaulTitle);
   };

   const handleOnChangeInputTitle = (evt) => setInputValue( evt.target.value);

   return (
      <div className="TodoInput mt2 brr10 grey lighten-5 ">
         <div className="input-field mt2 grey lighten-5">
            <h3>{todoString || defaulTitle}</h3>
         </div>
         <div className="input-field mt2 grey lighten-5">
            <input
               type="text"
               id="title"
               value={inputValue}
               onBlur={handleOnBlurInputTitle}
               onChange={handleOnChangeInputTitle}
            />
            <label htmlFor="title" className="active">Введите название задачи</label>
         </div>
      </div>
   )
};

export default TodoInput;

Answer 1

onKeyDown: ev => ev.key === 'Enter' && ev.target.blur()

const {useState} = React
const e = React.createElement
const App = (props) => {
   const defaulTitle = 'Здесь будет ваша задача';

   const [todoString, setTodoString] = useState('');
   const [inputValue, setInputValue] = useState('');

   const handleOnBlurInputTitle = (evt) => {
      const { value } = evt.target;
      if (value.trim()){
         setTodoString(value);
         setInputValue('');
         return;
      }
      setTodoString(defaulTitle);
   };

   const handleOnChangeInputTitle = (evt) => setInputValue( evt.target.value);

   return [
     e("input",{
       key: "inp",
       type: "text",
       value: inputValue,
       onBlur: handleOnBlurInputTitle,
       onChange: handleOnChangeInputTitle,
       onKeyDown: ev => ev.key === 'Enter' && ev.target.blur()
     }),
     e("div",{key: "res", tabIndex: 1}, todoString || defaulTitle)
   ]
};
const container = document.createElement("div")
document.body.appendChild(container)
ReactDOM.render(e(App),container)

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

БЛОГ НА HUSL

Делать onBlur при нажатии Enter

Ответы (1 шт):