从子接收道具到父反应组件的最佳方式

Question

我有一个要保存在数据库中的数组。我有一个页面（父组件）和一个表单（子组件），其中我的生日输入是（我保存在数据库中的那个）。 select html 元素位于子组件中，每次更改后我都会获取它们的值。现在我需要将收到的值从选择元素传递回我的父组件，并使用收到的道具更新数组。我将尽我所能重新创建我的代码：

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;

SignupForm.js（儿童）：

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 之后更新父组件中的状态。我是 React 新手，一整天都搞不清楚，所以任何帮助都意义重大。

Answer 1

孩子应该收到一个“onChange”功能道具。每次更改表单上的值时，都会在子组件内部调用它 (this.props.onChange(newValue))。

父级应保存将相应更新的值的状态 (<SignupForm ... onChange={(newValue) => this.setState({ value: newValue })} />)

Answer 2

从父级到子级可以通过 props 传递数据，但是从子级到父级最好的方式是通过函数，我将尝试在下面编写一个示例，我总是使用函数组件进行编码，所以我的语法不会在下面，但我希望你能明白...

父组件

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>;
  }
}