提交并关闭模式 window。 React React-Hook-Form 打字稿

Question

我想提交并使用“保存”按钮关闭。将类型更改为“按钮”type="submit" value="submit" onClick={ onClose } 不要提交也不要关闭。我正在使用 onClose 关闭模态

import { useAppDispatch } from '../redux/hooks';
import { userInfo } from '../redux/model';
import { useForm } from 'react-hook-form';
import { ModalProps } from '../redux/model';
import { setList } from '../redux/slice';

type UI = userInfo;

const AddData: React.FC<ModalProps> = ({ isOpen, onClose }) => {
  const [ page, setPage ] = useState(0);
  const FormTitles = ["Invoice Address", "Bank Data", "Contact"];

  const dispatch = useAppDispatch();
  const { register, handleSubmit, formState: { errors, isValid }} = useForm<UI>({ mode: "all" });
  
  const onSubmit = handleSubmit((data) => {
    dispatch(setList(data));
  });

  return isOpen ? (<div className="viewModal">
    <div className='modalContent'>
      <form onSubmit={ onSubmit }>
        <div className="contentForm">
          <div className="closeX" onClick={ onClose }>x</div>
          <div className="labels">
          <div className="titleTxt">{ FormTitles[page] }</div>
            { page === 0 && (<>
              <div className="labelInput">
                <label htmlFor="additional">Additional</label>
                <input { ...register("additional")} id="additional" />
              </div>

              <div className="labelInput">
                ... // content
              </div>

              <div className="labelInput">
                ... // content
              </div>
            </>)}

            { page === 1 && (<>
              <div className="labelInput">
                <label htmlFor="iban">IBAN</label>
                <div className="dirCol">
                  <input { ...register("iban", { required: true, maxLength: 30 })} id="iban" />
                  <div className="required">{ errors.iban && "This is required!" }</div>
                </div>
              </div>

              <div className="labelInput">
                ... // content
              </div>

            { page === 2 && (<>
              {/* *** fax *** */}
              <div className="labelInput">
                <label htmlFor="fax">Fax</label>
                <input { ...register("fax")} id="fax" />
              </div>

              <div className="labelInput">
                ... // content
              </div>

              <div className="labelInput">
                ... // content
              </div>
          </div>

          <div className="labelButton">
            <button className="button2" onClick={ onClose }>Cancel</button>

            { page !== 0 && (<div className="button2 textCancel" onClick={() => { setPage((x) => x - 1)}}
            >Previous</div>)}
            
            { page !== 2 && (<button className="button1" type="button" disabled={ !isValid } onClick={() => { setPage((x) => x + 1)}}
            >Next</button>)}
            
            { page === 2 && (<>
            <button className="button1" type="submit" value="submit" onClick={ onClose }>Save</button>
            </>)}
          </div>
        </div>
      </form>
    </div>
  </div>) : null
};

export default AddData;

此处 AddData 关闭和打开，onClose 使用取消和 x 按钮

import { useState } from 'react';
import AddData from './AddData';
import { useAppDispatch, useAppSelector } from '../redux/hooks';
import { removeList } from '../redux/slice';

const ListTable = () => {
  const [ isModalOpen, setIsModalOpen ] = useState(false);
  const toogleModal = () =>setIsModalOpen(!isModalOpen);

  const dispatch = useAppDispatch();
  const selector = useAppSelector((state) => state.users.list );

  return <>
    <AddData isOpen={ isModalOpen } onClose={ toogleModal }>
    </AddData>
    <nav>
      <button onClick={ toogleModal }>Add</button>
    </nav>

    <div className='content'>
      ... // content
    </div>
  </>
};

export default ListTable;

Answer 1

在保存按钮的 onClick 内部，您可以调用 onSubmit 和 onClose。

import { useAppDispatch } from "../redux/hooks";
import { userInfo } from "../redux/model";
import { useForm } from "react-hook-form";
import { ModalProps } from "../redux/model";
import { setList } from "../redux/slice";

type UI = userInfo;

const AddData: React.FC<ModalProps> = ({ isOpen, onClose }) => {
  const [page, setPage] = useState(0);
  const FormTitles = ["Invoice Address", "Bank Data", "Contact"];

  const dispatch = useAppDispatch();
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<UI>({ mode: "all" });

  const onSubmit = handleSubmit((data) => {
    dispatch(setList(data));
  });

  return isOpen ? (
    <div className="viewModal">
      <div className="modalContent">
        <form onSubmit={onSubmit}>
          <div className="contentForm">
            <div className="closeX" onClick={onClose}>
              x
            </div>
            <div className="labels">
              <div className="titleTxt">{FormTitles[page]}</div>
              {page === 0 && (
                <>
                  <div className="labelInput">
                    <label htmlFor="additional">Additional</label>
                    <input {...register("additional")} id="additional" />
                  </div>

                  <div className="labelInput">{/* ... // content */}</div>

                  <div className="labelInput">{/* ... // content */}</div>
                </>
              )}

              {page === 1 && (
                <>
                  <div className="labelInput">
                    <label htmlFor="iban">IBAN</label>
                    <div className="dirCol">
                      <input
                        {...register("iban", { required: true, maxLength: 30 })}
                        id="iban"
                      />
                      <div className="required">
                        {errors.iban && "This is required!"}
                      </div>
                    </div>
                  </div>

                  <div className="labelInput">... // content</div>
                </>
              )}

              {page === 2 && (
                <>
                  {/* *** fax *** */}
                  <div className="labelInput">
                    <label htmlFor="fax">Fax</label>
                    <input {...register("fax")} id="fax" />
                  </div>

                  <div className="labelInput">{/* ... // content */}</div>

                  <div className="labelInput">{/* ... // content */}</div>
                </>
              )}
            </div>

            <div className="labelButton">
              <button className="button2" onClick={onClose}>
                Cancel
              </button>

              {page !== 0 && (
                <div
                  className="button2 textCancel"
                  onClick={() => {
                    setPage((x) => x - 1);
                  }}
                >
                  Previous
                </div>
              )}

              {page !== 2 && (
                <button
                  className="button1"
                  type="button"
                  disabled={!isValid}
                  onClick={() => {
                    setPage((x) => x + 1);
                  }}
                >
                  Next
                </button>
              )}

              {page === 2 && (
                <>
                  <button
                    className="button1"
                    type="submit"
                    value="submit"
                    onClick={() => {
                      onSubmit();
                      onClose;
                    }}
                  >
                    Save
                  </button>
                </>
              )}
            </div>
          </div>
        </form>
      </div>
    </div>
  ) : null;
};

export default AddData;

提交并关闭模式 window。 React React-Hook-Form 打字稿

Submit and close modal window. React React-Hook-Form Typescript

typescript

reactjs

react-hook-form