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

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;

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;

所以基本上我想在我的子组件中的 select 元素发生 onChange 之后更新父组件中的状态。 我是 React 的新手，我一整天都想不通，所以任何帮助都意义重大。

Answer 1

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

父级应持有 state 值，这些值将相应更新（ <SignupForm... onChange={(newValue) => this.setState({ value: newValue })} /> ）

Answer 2

从父母到孩子你可以通过道具传递数据，但从孩子到父母最好的方式是function，我会尝试在下面写一个例子，我总是用函数组件编码所以我的语法不会在下面，但我希望你会明白的...

父组件

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