Как получить значения input при обработке onSubmit в React-redux?

Question

[RokeAlvo]

Вопрос по обработке события onSubmit в приложении redux:
пытаюсь использовать @material-ui/core. В форме при событии onSubmit вызывается Action, но не пойму как передать в Action значение полей формы. Т.е. я могу повесить на каждое поле Action на событие onChangeи записывать в store значение поля, но тогда в store будет записываться каждый символ, что ни к чему. При вызове Actionему передается SyntheticEvent у которого есть свойство target, но там список дом узлов, как по ним получить значения импутов?

сама форма:

import {
  Button,
  TextField,
  Card,
  CircularProgress,
} from '@material-ui/core'

....
          <form className="login-form" onSubmit={handleLogin}>
            <TextField
              id="login-form__text-input"
              label="Name"
              className="login-form__text-input"
              // value={username}
              // onChange={handleChange}
              margin="normal"
              variant="outlined"
              required
            />

.....

const mapDispatchToProps = dispatch => {
  return {
    handleLogin: (e) =>
      dispatch(handleLogin(e)),
    handleChange: () => dispatch(handleChange())
  }
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(LoginFormContainer)
)

Answer 1

[Sergey Epifanov]

Пройдитесь циклом по нодам и соберите все данные, которые вам нужны.
OnSumbit срабывает на форме, соответственно, в детях у формы есть все инпуты со значениями.
А вообще, можете воспользоваться уже готовыми библиотеками:
https://github.com/jaredpalmer/formik
https://github.com/final-form/react-final-form

Comments

[RokeAlvo]

Так в этом и вопрос: SyntheticEven.target дает объект формы, как из него получить значения? А библиотеки видел, но сначала хотелось бы свой велосипед, что бы понимать зачем их использовать

[Sergey Epifanov]

RokeAlvo, можете скинуть свой код на гитхаб и дать ссылку здесь? хочу локально воспроизвести, тогда можно будет конкретный код предоставить

[RokeAlvo]

Sergey Epifanov, https://github.com/RokeAlvo/react-redux-rout

[RokeAlvo]

забыл: компонент TextField принимает ref, который пробрасывает до инпута, но как это дело использовать, то же ума не приложу

[Sergey Epifanov]

RokeAlvo,

const values = Array.from(event.target).filter(node => node.tagName === 'INPUT' || node.tagName === 'SELECT').map(({ name, value }) => ({
    name,
    value
  }))

можно, например, так.
только добавьте name для инпутов

[Sergey Epifanov]

RokeAlvo, выложил код на Gist

[RokeAlvo]

Sergey Epifanov, большое спасибо
вопрос на засыпку: event.target это коллекция объектов какого типа?

[Sergey Epifanov]

RokeAlvo, event.target - это DOM-нода (https://developer.mozilla.org/ru/docs/Web/API/Node)
можете сделать console.dir(event.target), чтобы посмотреть, какие у нее есть свойства