如何从自定义组件触发提交 function

Question

我正在尝试从custom component触发表单提交 function。
总的来说，我的目标是触发一个boolean state value ，它是form的一部分，即使custom component导入到表单中，它也无法正常工作。
问题是关于来自自Custom Component的sendEmail function

这是下面的代码和 框链接和代码示例。

自定义组件

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

任何帮助将不胜感激

Answer 1

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

我会改成这样：

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

这样做之后，您会注意到您的isDone没有显示您期望的结果。 这是因为当您通过handleSubmit更改 state 时，它不会在此调用中更改。 你不应该担心记录它。 如果您需要对isDone值执行某些操作，这只会是一个问题

Answer 2

当您从自定义组件触发它时没有传递任何事件，因此event.preventDefault()将导致错误。

将事件添加到sendMail ，并将其传递给handleSubmit 。 onClick将自动将事件作为第一个参数传递：

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

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

---

更新的 CodeSandbox