Question

我有一个要提交表单的模型文件，但无法触发提交功能，我的文件就像

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;

当我尝试提交表单时， handleSubmit 不会触发。我尝试使用diff方法来触发此Submit方法，但到目前为止没有运气。任何帮助将不胜感激。

Answer 1

form标记必须位于模式组件内部，否则事件将无法正确弹出。

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

我个人建议采用最终形式： https://github.com/final-form/react-final-form

无法在模型反应中提交表单

1 个答案: