Как правильно собрать данные из списка групп полей

Question

Всем привет, есть вопрос. Разрабатываю приложуху. У меня на странице есть кнопка добавить форму, по нажатию на которую собсветнно добавляется форма, сама форма - отдельный компонет, у нее есть поля. Таких форм может быть много. И у меня проблема в том, что я не знаю как прокидывать стейт полей каждой формы в родительский компонент.

В родительском компоненте находится стейт всех форм

const [forms, setForms] = useState([]);

return (
  forms.map(form => <Form key={form.id} />)
)

В дочернем компоненте() у меня также есть поля:

const [driverFullname, setDriverFullname] = useState('');
const [sex, setSex] = useState('');

Подскажите как прокидывать стейт из компонента формы в стейт родительского компонента?

Answer 1

Сделайте компоненту формы коллбек onChange, который будет возвращать объект с содержимым полей после окончания ввода.

Для оптимизации, можно принимать собранные данные с задержкой

(function() {

  const {
    useEffect,
    useState,
  } = React;

  const Form = ({
    onChange = (data) => console.log({data}),
  }) => {

    const [driverFullname, setDriverFullname] = useState('');
    const [sex, setSex] = useState('');

    useEffect(() => {
      const timeout = setTimeout(() => onChange({
        driverFullname, sex,
      }), 1000);
      return () => clearTimeout(timeout);
    }, [driverFullname, sex]);

  };

})();

БЛОГ НА HUSL

Как правильно собрать данные из списка групп полей

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