Создайте компонент ввода и управляйте несколькими состояниями форм в React + Redux

Question

Мой проект имеет 2 отдельные формы: «пользователь» и «фильмы».Я создал один компонент ввода, который я хочу использовать во всех трех формах.Это не сложная вещь, но мне интересно, какой правильный подход заключается в сохранении данных при каждом нажатии клавиши или размытом действии в правильное состояние хранилища.

Итак, у меня есть 2 редуктора и 2 формы,«пользователь» и «фильмы».Пользовательская форма содержит только некоторые пользовательские и пользовательские метаданные.Форма фильмов будет «коллекцией» фильмов, просмотренных пользователем.

Я создал этот компонент текстового поля

import React from 'react';

class TextField extends React.Component {

  constructor(props) {
    super(props);
    this.state =  {
      name: this.props.name,
      value: this.props.value
    }
  }

  onChange = (e) => {
    const {
      value
    } = e.target

    this.setState({
      value: value
    });
  }

  onBlur = (e) => {
    const {
      value
    } = e.target

    this.setState({
      value: value
    });
  }

  render() {
    return(
      <input
        type="text"
        name={this.state.name}
        value={this.state.value}
        onBlur={(e) => this.onBlur(e)}
        onChange={(e) => this.onChange(e)}
      />
    )
  }
}

export default TextField;

И в компоненте формы

<TextField
   name={`${this.state.movies}[${index}].name`}
   value={item.name}
/>

Нет, мне нужен правильный подход для записи значений с помощью onChange или onBlur непосредственно в нужное состояние пользователя или фильма.например, фильмы [1]. имя должно быть добавлено к состоянию фильмов с помощью редуктора:

movies : [{
  name: 'movie #1'
 },
  name: 'movie #2'
}]

Должен ли я передать в каждое поле ввода функцию для onChange и onBlur через реквизиты, чтобы компонент TextField знал, какдескать и где записать значение в магазин?Например,

<TextField
  name={`${this.state.movies}[${index}].name`}
  value={item.name}
  onBlur={(event) => console.log('onBlur action')}
  onChange={(event) => console.log('onChange action')}
/>

Я работал с такими модулями, как 'redux-form', но он кажется тяжелым, но не настолько стабильным.Я хотел бы контролировать все сам, так как форма 'movie' - это просто коллекция без проверок на стороне пользователя.

Answer 1

Да!Распространение событий - путь.Вы определенно не хотите связывать свой TextField компонент с какой-либо логикой или любой другой логикой управления состоянием, так как это противоречит цели повторного использования.Я бы создал функции обработки в компоненте Form, которые бы выполняли эту функцию (например, handleOnBlurMovieInput, handleOnChangeUserInput) и передавали их в TextField как реквизиты соответственно.