如何在 React 中将子道具存储到父 state？

Question

我有一个Parent组件，它接收child和onSubmit道具。 孩子是具有任意道具的任意功能组件。

前任。

const Child = ( { name, onNameChange } ) => <> ... </>

// or

const Child = ( { description, onDescriptionChange } ) => <> ... </>

我想将孩子的道具存储在父组件中，以便

1. 孩子对自己的道具进行更改（通过使用自己的道具）
2. 当单击提交按钮时，父母可以使用子道具将它们传递给提交 function。

const Parent = (
  {
    child: Child,
    onSubmit,
  },
) => {

  const childProps = 'What do I put here ?';
  
  const handleSubmit = () => {
    onSubmit(childProps);
  };

  return (
    <>
      <Child { ...childProps } />
      <button onClick={ () => { return handleSubmit(); } }>Submit</button>
    </>
  );
};

我怎样才能做到这一点？

Answer 1

您可以通过在将子组件传递给父组件（又名祖父母）的组件中声明子组件的道具来规避您的问题

const Parent = (
  {
    child: React.Node, // this child should already have the props it needs
    onSubmit: (model: any) => void, // wrap this function
  },
) => {

祖父母可以有一个带有签名(model: any) => void的onSubmit方法，它可以将其传递给父母。 然后父级可以用它自己的 function 处理程序包装这个onSubmit ，它可以访问 model。 然后将修改后的处理程序传递给onClick