Как я могу отправить вход с возможностью восстановить его значение с помощью onBlur? - PullRequest
Новая
       5

Как я могу отправить вход с возможностью восстановить его значение с помощью onBlur?

1 голос
/ 08 апреля 2019

Я хочу сделать простой функциональный компонент ввода с использованием хуков.Я хочу, чтобы он отправлял свое значение при нажатии кнопки или при нажатии Enter. 

const Input = ({ name, value, onSubmit }) => {

  const [input, setInput] = useState(value);
  //set input's value with props.value
  useEffect(() => {
    setInput(value);
  }, [value]);

  return (
    <>
      <input
        name={name}
        value={input}
        onBlur={() => setInput(value)}
        onChange={e => setInput(e.target.value)}
      />
      // show submit button if input has been changed
      {value !== input && (<input type='submit' onClick={onSubmit} />)}
    </>
  );
}

Восстановление значения с помощью onBlur работает нормально.Но когда я хочу представить свой вклад - я не могу.OnBlur срабатывает до нажатия onClick.Здесь, на SO, я нашел 2 предложения:

  1. Использовать onMouseDown, так как он срабатывает до onBlur.Хорошо, это работает, но я хочу, чтобы клавиатура моего приложения была дружественной.

  2. Добавить setTimeout в событие onBlur.Но он запоминает старое значение, поэтому даже если я сохраняю изменения, я не вижу их сразу после повторного рендеринга, что совсем не здорово.

Я нашел решение.Я добавил форму со вторым обработчиком onSubmit и изменил onClick на onMouseDown при вводе ввода: 

const Input = ({ name, value, onSubmit }) => {

  const [input, setInput] = useState(value);
  //set input's value with props.value
  useEffect(() => {
    setInput(value);
  }, [value]);

  return (
    <form onSubmit={onSubmit}>
      <input
        name={name}
        value={input}
        onBlur={() => setInput(value)}
        onChange={e => setInput(e.target.value)}
      />
      // show submit button if input has been changed
      {value !== input && (
        <input type='submit' onMouseDown={onSubmit} />)
      }
    </form>
  );
}

Вот JSFiddle .

Существует одна проблема: после отправки ввод остается в фокусес кнопкой ввода.Есть ли лучший способ и, если нет, как я могу вызвать onBlur из функции onSubmit?

...