用子级的 state 替换父级 state。 父级按钮

Question

EDIT: See the comment of Oo for the explanation of the answer and the variant in case you are using classes.

I've come across to something and I can't find the solution.

I have 4 components in my web app:

Parent
   child_1
   child_2
   child_3

I have a button on the Parent , and different forms (with inputs, checkboxes and radiobuttons) at the children.

Each child has his own button that executes several functions, some calculations, and updates the corresponding states. (No states are passed through parent and child).

I need to replace the three buttons of the children with the parent button. Is there a way that I can execute the functions at the three children from the parent button and retrieve the results? (the results are one state:value per child.)

Answer 1

function Child1(props) {
   const [value, setValue] = useState("");
   useEffect(() => {
      calculate();
   }, [props.flag]);
   calculate() {
       //blah blah
   }
   onChange(e) {
      setValue(e.target.value);
      props.onChange(e.target.value); // update the state in the parent component
   }
   return (
      <input value={value} onChange={(e) => onChange(e)} />
   );
}

function Parent(props) {
  const [flag, setFlag] = useState(false);
  const [child1Value, setChild1Value] = useState("");
  return (
    <div>
       <Child1 flag={flag} onChange={(value) => setChild1Value(value)}/>
       <button onClick={() => setFlag(!flag)} />
    </div>
  );
}

I didn't test this but hope this helps you. And lemme know if there is an issue.

Answer 2

Try the following:

• create refs using useRef for child form components.
• for functional components, in order for the parent to access the child's methods, you need to use forwardRef
• using the ref, call child component functions on click of parent submit button (using ref.current.methodName )

See the example code. I have tested it on my local, it is working ok.

Parent

import React, { Fragment, useState, useRef } from "react";
import ChildForm1 from "./ChildForm1";

const Parent = props => {
  const [form1Data, setFormData] = useState({});//use your own data structure..
  const child1Ref = useRef();
  // const child2Ref = useRef(); // for 2nd Child Form...

  const submitHandler = e => {
    e.preventDefault();
    // execute childForm1's function
    child1Ref.current.someCalculations();
    // execute childForm2's function

    //    finally do whatever you want with formData
    console.log("form submitted");
  };

  const notifyCalcResult = (calcResult) => {
      // update state based on calcResult
      console.log('calcResult', calcResult);
  };

  const handleChildFormChange = data => {
    setFormData(prev => ({ ...prev, ...data }));
  };

  return (
    <Fragment>
      <h1 className="large text-primary">Parent Child demo</h1>
      <div>
        <ChildForm1
            notifyCalcResult={notifyCalcResult}
            ref={child1Ref}
            handleChange={handleChildFormChange} />
          {/*{do the same for ChildForm2 and so on...}*/}
        <button onClick={submitHandler}>Final Submit</button>
      </div>
    </Fragment>
  );
};

export default Parent;

ChildFormComponent

import React, { useState, useEffect, forwardRef, useImperativeHandle } from "react";

const ChildForm1 = ({ handleChange, notifyCalcResult }, ref) => {
  const [name, setName] = useState("");
  const [calcResult, setCalcResult] = useState([]);

  const someCalculations = () => {
    let result = ["lot_of_data"];
    //  major calculations goes here..
    //  result = doMajorCalc();
    setCalcResult(result);
  };
  useImperativeHandle(ref, () => ({ someCalculations }));

  useEffect(() => {
    //  notifiy parent
    notifyCalcResult(calcResult);
  }, [calcResult]);

  return (
    <form className="form">
      <div className="form-group">
        <input
            value={name}// //TODO: handle this...
          onChange={() => handleChange(name)}//TODO: notify the value back to parent 
          type="text"
          placeholder="Enter Name"
        />
      </div>
    </form>
  );
};

export default forwardRef(ChildForm1);

Also as a best practice, consider to maintain state and functions in the parent component as much as possible and pass the required values/methods to the child as props.