Reactjs 使用父组件中的按钮调用子组件中的函数

我有一个模态函数组件，它有一个子类组件作为表单输入。我的submit按钮处于模式中，但我需要使用存储在孩子状态中的信息来使用我的函数提交查询。如何从父类的submit按钮在子类组件中调用此函数

父功能组件：

function AddGearModal() {
  const [open, setOpen] = React.useState(false);

  return (
    <Container>
      <Modal
        onClose={() => setOpen(false)}
        onOpen={() => setOpen(true)}
        open={open}
        trigger={
          <Button icon>
            <Icon name="plus" />
          </Button>
        }
      >
        <Modal.Header>Add New Gear</Modal.Header>
        <Modal.Content>
          <AddGearForm />
        </Modal.Content>
        <Modal.Actions>
          <Button color="black" onClick={() => setOpen(false)}>
            Nope
          </Button>
          //this button should call handleSubmit() in child component
          <Button
            content="Add Gear"
            labelPosition="right"
            icon="checkmark"
            onClick={() => setOpen(false)}
            positive
          />
        </Modal.Actions>
      </Modal>
    </Container>
  );
}

class AddGearForm extends Component {
  state = {
    name: "",
    level: "1",
    available: "1",
  };

  handleSubmit = () => {
      //I want to call this from parent component
  };

  //any changes to form inputs will set their corresponding state
  handleChange = (e, { name, value }) => {
    this.setState({ [name]: value });
    console.log("State changed: ", name, value);
  };

  render() {
    const { name, level, available } = this.state;
    const levelOptions = [
      { key: "1", value: "1", text: "Film 1" },
      { key: "2", value: "2", text: "Film 2" },
      { key: "3", value: "3", text: "Film 3" },
      { key: "4", value: "4", text: "Film 4" },
    ];
    const availableOptions = [
      { key: "1", value: "1", text: "Yes" },
      { key: "0", value: "0", text: "No" },
    ];
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Field>
          <Form.Input
            label="Gear Name"
            placeholder="Name"
            name="name"
            value={name}
            onChange={this.handleChange}
          />
        </Form.Field>
        <Form.Group widths="equal">
          <Form.Field
            control={Select}
            name="level"
            value={level}
            options={levelOptions}
            onChange={this.handleChange}
          />
          <Form.Field
            control={Select}
            name="available"
            value={available}
            options={availableOptions}
            onChange={this.handleChange}
          />
        </Form.Group>
      </Form>
    );
  }
}

函数AddGearModal（）{
const[open，setOpen]=React.useState（false）；
返回(
setOpen（false）}
onOpen={（）=>setOpen（true）}
open={open}
触发={
}
>
添加新齿轮
setOpen（false）}>
不
//此按钮应在子组件中调用handleSubmit（）
setOpen（false）}
积极的
/>
);
}

子类组件：

function AddGearModal() {
  const [open, setOpen] = React.useState(false);

  return (
    <Container>
      <Modal
        onClose={() => setOpen(false)}
        onOpen={() => setOpen(true)}
        open={open}
        trigger={
          <Button icon>
            <Icon name="plus" />
          </Button>
        }
      >
        <Modal.Header>Add New Gear</Modal.Header>
        <Modal.Content>
          <AddGearForm />
        </Modal.Content>
        <Modal.Actions>
          <Button color="black" onClick={() => setOpen(false)}>
            Nope
          </Button>
          //this button should call handleSubmit() in child component
          <Button
            content="Add Gear"
            labelPosition="right"
            icon="checkmark"
            onClick={() => setOpen(false)}
            positive
          />
        </Modal.Actions>
      </Modal>
    </Container>
  );
}

class AddGearForm extends Component {
  state = {
    name: "",
    level: "1",
    available: "1",
  };

  handleSubmit = () => {
      //I want to call this from parent component
  };

  //any changes to form inputs will set their corresponding state
  handleChange = (e, { name, value }) => {
    this.setState({ [name]: value });
    console.log("State changed: ", name, value);
  };

  render() {
    const { name, level, available } = this.state;
    const levelOptions = [
      { key: "1", value: "1", text: "Film 1" },
      { key: "2", value: "2", text: "Film 2" },
      { key: "3", value: "3", text: "Film 3" },
      { key: "4", value: "4", text: "Film 4" },
    ];
    const availableOptions = [
      { key: "1", value: "1", text: "Yes" },
      { key: "0", value: "0", text: "No" },
    ];
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Field>
          <Form.Input
            label="Gear Name"
            placeholder="Name"
            name="name"
            value={name}
            onChange={this.handleChange}
          />
        </Form.Field>
        <Form.Group widths="equal">
          <Form.Field
            control={Select}
            name="level"
            value={level}
            options={levelOptions}
            onChange={this.handleChange}
          />
          <Form.Field
            control={Select}
            name="available"
            value={available}
            options={availableOptions}
            onChange={this.handleChange}
          />
        </Form.Group>
      </Form>
    );
  }
}

class AddGearForm扩展组件{
状态={
姓名：“，
级别：“1”，
可供选择：“1”，
};
handleSubmit=（）=>{
//我想从父组件调用它
};
//对表单输入的任何更改都将设置其相应的状态
handleChange=（e，{name，value}）=>{
this.setState（{[name]：value}）；
log（“状态更改：”，名称，值）；
};
render（）{
const{name，level，available}=this.state；
常量级别选项=[
{键：“1”，值：“1”，文本：“胶片1”}，
{键：“2”，值：“2”，文本：“电影2”}，
{键：“3”，值：“3”，文本：“电影3”}，
{键：“4”，值：“4”，文本：“电影4”}，
];
常量可用选项=[
{键：“1”，值：“1”，文本：“是”}，
{键：“0”，值：“0”，文本：“否”}，
];
返回(
);
}
}

我试图阅读使用useReducer（）钩子传递分派的内容，但我很难理解它。

这被称为父级的“提升状态”。理想情况下，您不希望将状态存储在两个位置，因此将状态作为道具传递给孩子可能是有意义的，而不是将状态存储在那里。我会给你一个简单的例子

const Parent = () => {
    // store the state here
    const [state, setState] = useState(null)

    // handler that you pass into child and updates state
    const handleChange = (/* params */) => setState(/* set new value */) 
    
    // pass state & handler to child
    return <Child value={state} onChange={handleChange} />
}

// pass the value & handler to child
const Child = ({ value, onChange }) => {
    // pass the new value to the parent (lifting state)
    return <Form.Field onChange={onChange} />
}

const Parent=（）=>{
//将状态存储在这里
const[state，setState]=useState（null）
//传递到子级并更新状态的处理程序
常量handleChange=（/*参数*/）=>setState（/*设置新值*/）
//将状态和处理程序传递给子级
返回
}
//将值和处理程序传递给子对象（&H）
常量子项=（{value，onChange}）=>{
//将新值传递给父对象（提升状态）
返回
}

另外，如果有人对我的标签感到困惑，他们是来自语义用户界面，这是有道理的。然而，我试图实现它，但是现在似乎没有调用onChange。我在handleChange处理程序中放置了一个console.log，但它并没有显示在控制台上。此外，我似乎无法在表单字段中键入任何内容。哦，别客气！我把零钱而不是零钱传给了我的孩子。愚蠢的mistake@LukeLewis如果这对你有帮助，请投票并接受答案，请完成！我的声誉仍然很低，所以很不幸，upvote不可见。很高兴我能帮忙。