Лучший способ получить реквизит от дочернего к родительскому компоненту реакции

Question

У меня есть массив, который я хочу сохранить в своей базе данных. У меня есть страница (родительский компонент) и форма (дочерний компонент), где мой ввод дня рождения (тот, который я сохраняю в базе данных). Элементы select html находятся в дочернем компоненте, и я беру их значения после каждого изменения. Теперь мне нужно передать полученные значения из элементов select обратно в родительский компонент и обновить массив полученными реквизитами. Я постараюсь воссоздать свой код как можно лучше:

AuthenticationPage. js (родительский):

import React from 'react';

class AuthenticationPage extends Component {
    constructor(props) {
        super(props);
        this.state({
            setMonth:null
            setDay:null
            setYear:null
        })
    }
    render() {
        return(
           <div>
           <SignupForm // This is where I call my child component
            onChange={(monthValue) => this.setState({ setMonth: monthValue })}
            initialValues={{ 
              dateofbirth: [
                {
                  month: this.state.setMonth, // This one is okey but I can use onChange just to change one state
                  day: this.state.setDay,
                  year: this.state.setYear
                }
              ]
            }}
            />
           </div>
        )
    }
}

export default AuthenticationPage;

RegistrationForm. js (Child):

import React from "react";
import SelectSearch from "react-select-search";

const SignupForm = (props) => (
  <FinalForm
    {...props}
    render={(fieldRenderProps) => {
      const { 
      // Here I render props from parent component
      } = fieldRenderProps;

      function monthPicker(monthValue) {
        props.onChange(monthValue);
        // How can I update the state of setDay and setYear states in parent component
      }

      return (
        <Form className={classes} onSubmit={handleSubmit}>
          <SelectSearch
            options={month}
            onChange={(monthValue) => monthPicker(monthValue)} // This is ok, I change setMonth state in parent with this function
          />
          <SelectSearch
            options={day}
            // How to work with this, this is day input
          />
          <SelectSearch
            options={year}
            // How to work with this, this is year input
          />
        </Form>
      );
    }}
  />
);

export default SignupForm;

Поэтому в основном я хочу обновить состояния в родительском компоненте после того, как onChange произойдет с элементами select в моем дочернем компоненте. Я новичок в React и не могу понять это целый день, поэтому любая помощь будет много значить. Спасибо, будьте в безопасности!

Answer 1

Ребенок должен получить реквизит функции onChange. Это будет вызываться внутри дочернего компонента, каждый раз, когда значения в форме изменяются (this.props.onChange(newValue)).

Родитель должен содержать состояние значений, которые будут соответственно обновляться (<SignupForm ... onChange={(newValue) => this.setState({ value: newValue })} />)

Answer 2

От родителя к потомку вы можете передавать данные через подпорки, но от потомка к родителю лучше всего по функциям, я постараюсь написать пример ниже, я всегда пишу код с функциональным компонентом, поэтому мой синтаксис не будет прямо ниже, но я надеюсь, что вы поймете идею ...

Родительский компонент

class Parent extends React.Component {
constructor(props) {
        super(props);
        this.state({
            monthValue:null
        })
    }

// this function send as a prop
const updateMonthValue =(value)=>{
  this.state.monthValue=value
}
  render() {
    return <Child updateMonthValue={updateMonthValue} />;
  }
}

Дочерний компонент

const Child =(props) => {
  const submitHandler =(value) =>{
    //here you can call the function of parent and the function in the parent will update state of parent
    props.updateMonthValue(value)
  }
  render() {
    return <h1><button onClick={()=>submitHandler("june")} /></h1>;
  }
}