Javascript 无法在模型中提交表单

我有一个模型文件，我想在其中提交表单，但我不能触发提交功能，我的文件是这样的

import React, { useState, useEffect } from "react";
import InputField from "./InputField";
import Button from "./Button";
import axios from "axios";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

function ArticleOptionsModal(props) {
  const [articleOption, setArticleOption] = useState("");
  useEffect(() => {
    if (typeof props.articleopt === "undefined") {
      setArticleOption("");
      console.log("hhiii");
    } else {
      setArticleOption(props.articleopt.optionname);
      console.log("hhiii");
    }
  }, [props]);

  return (
    <form onSubmit={e => handleSubmit(e)}>
    <Modal isOpen={props.modal} toggle={props.toggle}>
      <ModalHeader toggle={props.toggle}>Times</ModalHeader>
      <ModalBody>
            <div className='row'>
              <div className='col-sm-6'>
                <div className='form-group text-left'>
                  <label htmlFor='' className='small'>
                    Name
                  </label>
                  <InputField
                    name='username'
                    placeholder={"Enter Name"}
                    value={articleOption.optionname}
                    onChange={e => changeOptionName(e)}
                  />            
               </div>
            </div>
        )}
      </ModalBody>
      <ModalFooter>
        <Button
          name={"Submit"}
          type='submit'
          btnLongWidth={false}
          onClick={props.toggle}
        />
        <Button
          name={"Cancel"}
          dangerButton={true}
          btnLongWidth={false}
          onClick={props.toggle}
        />
      </ModalFooter>
    </Modal>
  </form>
  );
  function changeOptionName(e) {
    setArticleOption(e.target.value);
  }
  function handleSubmit(e) {
    console.log("hiiiiii");
  }
}

export default ArticleOptionsModal;

import React，{useState，useffect}来自“React”；
从“/InputField”导入InputField；
从“/”按钮导入按钮；
从“axios”导入axios；
从“reactstrap”导入{Modal，ModalHeader，ModalBody，ModalFooter}；
功能文章选项模式（道具）{
const[articleOption，setArticleOption]=useState（“”）；
useffect（（）=>{
if（typeof props.articleopt==“未定义”）{
setArticleOption（“”）；
控制台日志（“hhiii”）；
}否则{
setArticleOption（props.articleopt.optionname）；
控制台日志（“hhiii”）；
}
}[道具]；
返回(
handleSubmit（e）}>
时代
名称
changeOptionName（e）}
/>            
)}
);
函数更改选项名称（e）{
setArticleOption（即目标值）；
}
函数handleSubmit（e）{
控制台日志（“hiiiiii”）；
}
}
导出默认ArticleOptions模式；

---

当我尝试提交表单时，handleSubmit不会触发。我尝试使用diff方法来触发这个submit方法，但到目前为止没有成功。任何形式的帮助都将不胜感激。

表单标签需要位于模态组件内部，否则，事件不会正确冒泡

如前所述，我建议使用表单库来处理表单管理

我个人建议最终形式：

---

您在任何地方调用

handleSubmit

？提交时，您只需调用

changeOptionName

@user148397抱歉，代码已更新。我只是在测试是否有其他函数正在触发。我还建议使用Formik或Final form之类的表单库进行表单管理。这使得处理提交变得更容易。好的，接下来我将尝试在模态组件内移动表单标记。可能事件丢失是因为模态组件。@user148397让我检查一下谢谢帮助。如果可能的话，请投票表决我的问题。