Tworzę prostą aplikację za pomocą React i posiadam dwa komponenty: Form i Modal. Formularz należy otworzyć w momencie składania Formularza. Jak zmienić stan komponentu modalnego na ...

0
nsog8sm43x 25 czerwiec 2021, 15:47

4 odpowiedzi

Najlepsza odpowiedź

Możesz mieć stan modalny w Form.js, a następnie przekazać go jako rekwizyty do Modal.js.

Po przesłaniu formularza ustaw stan modalny.

Form.js

import Modal from './Modal'

export default function Form() {
  const [open, setOpen] = useState(false)

  const handleSubmit = (e) => {
    e.preventDefault()
    ...
    setOpen(true);
  }
  return (
   <>
    <form onSubmit={handleSubmit}>
      <SuccessModal />
      <div className='mt-1'>
        ...
    </form>
    {open && <Modal open={open} setOpen={setOpen} />}
    </>
)}

Modal.js

export default function Modal({ open, setOpen }) {

  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog
        as='div'
        static
        open={open}
        onClose={setOpen}
      >
        ...
      </Dialog>
     </Transition.Root>
2
Rajdeep Debnath 25 czerwiec 2021, 13:09

Kontroler stanu useState powinien znajdować się w rodzicu, a nie w Modal.

Następnie możesz po prostu użyć właściwości, aby zdefiniować stan open.

Jednym ze sposobów, w jaki robimy to w mojej pracy, jest stworzenie dla niego niestandardowego haka:

// stateless modal component
export default function Modal({ open }) {
  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog
        as='div'
        static
        open={open}
        onClose={setOpen}
      >
        ...
      </Dialog>
     </Transition.Root>
}

// custom hook
export function useModal({ initialState }) {
  const [open, setOpen] = useState(initialState)

  return {
    component: <Modal open={open} />,
    setOpen,
  }
}

// parent code
import { useModal } from './Modal'

export default function Form() {
  const modal = useModal(false)
  const handleSubmit = (e) => {
    e.preventDefault()
    modal.setOpen(true)
  }
  return (
    <form onSubmit={handleSubmit}>
      {modal.component}
      <div className='mt-1'>
        ...
    </form>
)}

2
kigiri 25 czerwiec 2021, 12:56

Możesz spróbować podnieść stan dziecka (Modal) do stanu rodzica (Form). Odnieś się do tego

1
Harsh Gaur 25 czerwiec 2021, 12:51

Nie używasz stanu do pokazywania lub ukrywania komponentu modalnego. Użyj rekwizytów. Z rekwizytami komponenty będą działać tak:

import Modal from './Modal'

interface IFormProps {}
interface IFormState {
  isModalOpen: boolean
}

export class Form extends React.Component<IFormProps, IFormState> => {
  state: IFormState = {
    isModalOpen: false,
  }

  const handleSubmit = (e): void => {
    this.setState({ isModalOpen: true })
    e.preventDefault()
  }

  const handleModalClose = (): boolean => {
    this.setState({ isModalOpen: false })
  }

  return (
    <form onSubmit={handleSubmit}>
      <Modal isOpen={this.state.isModalOpen} handleClose={this.handleModalClose} />
      <div className='mt-1'>
        ...
    </form>
)}
interface IModalProps {
  isOpen: boolean
  handleClose: () => boolean
}

interface IModalState {}

export class Modal extends React.Compnent<IModalProps, IModalState> {
  const { isOpen, handleClose } = this.props

  return (
    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog
        as='div'
        static
        open={isOpen}
        onClose={handleClose}
      >
        ...
      </Dialog>
     </Transition.Root>
0
Sergio Belevskij 25 czerwiec 2021, 13:08