Как достать значение из Input при отправке формы, используя TypeScript?

Question

[vertically-challenged]

Обычно на JS я делал так, но на TS оно не работает, выводится ошибка:

Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'EventTarget'.
Property '0' does not exist on type 'EventTarget'

Вот так я пытаюсь достать value:

<form onSubmit={
      (event) => {
        event.preventDefault()
        console.log(event.target[0].value)
      }
    }>

Comments

[vertically-challenged]

Ну если вывести event в консоль, то в поле target лежат два элемента формы, input под ключом 0 и button под ключом 1, и я пытаюсь достать value input-а, обращаясь к event.target[0]

[Mesuti]

Property '0' does not exist on type 'EventTarget'

По-русски = У target не может быть свойства 0
Попробуйте
console.log(event.target.value)

p.s. target в контексте указанного кода будет Форма.

[vertically-challenged]

Mesuti, так тоже выдает ошибку:

Property 'value' does not exist on type 'EventTarget'

[Mesuti]

vertically-challenged, Отлично.
Ближе на 1 шаг.
Теперь говорится, что у target нет value.
Потому что в данном случае target это форма.

Пришлите верстку с нужным input
Он как-то обрабатывается? Сохраняется в state?

[vertically-challenged]

Mesuti, вот это вся форма:

<form onSubmit={
      (event) => {
        event.preventDefault()
        console.log(event.target.value)
      }
    }>
      <Input value={inputCityValue} onChange={onChangeHandlerWrapper(setInputCityValue)}/>
      <button type='submit'><span>Обновить данные</span></button>
    </form>

[Вадим]

vertically-challenged, Да, действительно. Не доводилось ранее встречаться с такой особенностью форм.
В общем, так никто не делает и у других элементов так сделать не получится. Вот Вам ТС и ругается.
Вы можете считать значение инпута по его name атрибуту, например.

<form action="" id="f">
  <input type="text" name="test" value="lorem">
</form>

f.addEventListener('submit', event => {
  event.preventDefault();
  alert(event.target['test'].value)
})

[Вадим]

vertically-challenged, Но возникает вопрос зачем Вам это вообще надо. Так как у Вас реакт - скорее всего Вы используете контролируемые элементы форм, то есть значения инпутов есть в стэйте. Зачем считывать его из DOM?
Зачем делать это при сабмите?

[Mesuti]

Значение input находится в state.
Берите его оттуда.

Если была бы обычная верстка, то console.log(event.target['test'].value)
А Вы используете реакт, поэтому все значения берутся из состояний, верстка только для отрисовки

<form onSubmit={
      (event) => {
        event.preventDefault()
        console.log(inputCityValue)
      }
    }>
      <Input value={inputCityValue} onChange={onChangeHandlerWrapper(setInputCityValue)}/>
      <button type='submit'><span>Обновить данные</span></button>
    </form>

[vertically-challenged]

Вадим, Mesuti,

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

<form onSubmit={
  (event) => {
    event.preventDefault()
    dispatch(setCity(event.target['test'].value))
  }
}>

Вадим,
event.target['test'].value
А это тоже выдает ошибку:

Element implicitly has an 'any' type because expression of type '"test"' can't be used to index type 'EventTarget'.
Property 'test' does not exist on type 'EventTarget'.

[Вадим]

vertically-challenged, Так у Вас только форма будет обновляться. Конечно, в случае со сложными формами может потребоваться оптимизация, но чрезмерно предоптимизировать тоже не стоит.
Подход с неконтролируемыми элементами может в итоге выйти боком, проверено.
Однако, если же Вам всё же так хочется, то можно попробовать сделать так:
1) каждому инпуту задать name,
2) при сабмите создать новый объект FormData(e.target)
3) проитерироваться по нему и установить значения в стэйт. (хотя есть вероятность наткнуться на ту же ошибку в конечном счёте)

Но тут возник вопрос. А точно ли Вам, в таком случае, нужно устанавливать значения в стэйт при сабмите?

Подход с индексами точно сомнительный. Завтра два инпута поменяются в разметке местами - всё, ошибка. Так как нулевой элемент уже не тот, что мы подразумеваем.

Ещё у форм есть свойство elements - в котором есть коллекция контролов форм, по которой можно проитерироваться, и тогда такой ошибки быть не должно.

[vertically-challenged]

Вадим, Mesuti, действительно, что-то я сильно затупил, у меня же есть state со значением input-а, оказывается можно сделать так:

const dispatch = useDispatch()
  const city = useSelector((state: TRootState) => state.city)
  const [inputCityValue, setInputCityValue] = useState(city)

  return (
    <form onSubmit={
      (event) => {
        event.preventDefault()
        dispatch(setCity(inputCityValue))
      }
    }>
      <p>{city}</p>
      <Input name={'test'} value={inputCityValue} onChange={onChangeHandlerWrapper(setInputCityValue)}/>
      <button type='submit'><span>Обновить данные</span></button>
    </form>
  )

Спасибо за помощь ^^

[Вадим]

vertically-challenged, о том мы Вам и толкуем :-)
Продублируйте в ответы и выберите решением или удалите вопрос, чтобы другие пользователи сервиса не тратили на него время.

Answer 1

[Mesuti]

Значение input находится в state.
Берите его оттуда.

Если была бы обычная верстка, то console.log(event.target['test'].value) (данный пример от Вадим)
А Вы используете реакт, поэтому все значения берутся из состояний, верстка только для отрисовки

<form onSubmit={
    (event) => {
        event.preventDefault()
        console.log(inputCityValue)
    }
}>
    <Input value={inputCityValue} onChange={onChangeHandlerWrapper(setInputCityValue)}/>
    <button type='submit'><span>Обновить данные</span></button>
</form>

Answer 2

[vertically-challenged]

const dispatch = useDispatch()
  const city = useSelector((state: TRootState) => state.city)
  const [inputCityValue, setInputCityValue] = useState(city)

  return (
    <form onSubmit={
      (event) => {
        event.preventDefault()
        dispatch(setCity(inputCityValue))
      }
    }>
      <p>{city}</p>
      <Input name={'test'} value={inputCityValue} onChange={onChangeHandlerWrapper(setInputCityValue)}/>
      <button type='submit'><span>Обновить данные</span></button>
    </form>
  )