如何从自定义组件触发提交功能答案

【问题标题】：How to trigger a submit function from Custom Component如何从自定义组件触发提交功能
【发布时间】：2022-11-24 18:35:58
【问题描述】：

我正在尝试从custom component 触发表单提交功能。
一般来说，我的目标是触发一个boolean state value，它是form的一部分，即使custom component被导入到表单中，不知何故它不起作用。
问题是关于来自Custom Component的sendEmail函数

下面是 codesandbox link 和代码示例。

自定义组件

import React from "react";

const CustomComponent = (props) => {
  return (
    <div>
      <button onClick={props.sendEmail} type="submit">
        send email
      </button>
    </div>
  );
};

export default CustomComponent;

应用程序.js

import { useState } from "react";
import CustomComp from "./CustomComp";

export default function App() {
  const [isDone, setIsDone] = useState(false);
  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsDone(true);
    console.log("inputText", inputText);
  };

  console.log(isDone);

  const sendEmail = () => { // this doesn't work
    handleSubmit();
    console.log("isDone", isDone);
  };

  const onChangeHandler = (e) => {
    setInputText(e.target.value);
  };

  return (
    <form>
      <h1>Hello CodeSandbox</h1>
      <input type="text" onChange={onChangeHandler} value={inputText} />
      <CustomComp sendEmail={sendEmail} />
      <button onClick={handleSubmit} type="submit">
        submit
      </button>
    </form>
  );
}

任何帮助将不胜感激

【问题讨论】：

您调用 handleSubmit()，这意味着 e 将是未定义的。所以 e.preventDefault() 导致崩溃。我对你的目标是什么以及为什么你有多个提交按钮感到困惑，但你可以通过将表单提交逻辑移动到另一个函数并调用它而不是调用不带参数的 handleSubmit 来消除崩溃

标签： javascript reactjs

【解决方案1】：

你遇到的第一个问题是你在sendEmail中调用handleSubmit而不通过'e'

我会改成这样：

const sendEmail = (e) => {
  handleSubmit(e);
  console.log("isDone", isDone);
};

执行此操作后，您会注意到您的isDone 没有显示您期望的内容。这是因为当您通过handleSubmit 更改状态时，它不会在此调用中更改。你不应该担心记录它。仅当您需要对 isDone 值执行某些操作时才会出现问题

【讨论】：