如何在反应的组件中传递useState？

Question

I have a register page and Modal component. In register has a useState for visibility of the Modal. I'm passing it as a prop to Modal. When the modal is closed how to change the useState value in the register page.

Register page:

import React, { useState } from 'react'
import {
  CCard,
  CButton,
  CCardBody,
  CCardHeader,
  CCol,
  CForm,
  CFormInput,
  CFormLabel,
  CSpinner,
  CRow,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilSend } from '@coreui/icons'
import Alert from 'src/components/Alert'
import Modal from 'src/components/Modal'

const FormControl = () => {
  const [disabled, setDisabled] = useState(false)
  const [visible, setVisible] = useState(false)
  const [email, setEmail] = useState('')
  const [name, setName] = useState('')

  const handleAddMember = async () => {
    try {
      const data = { email, name }

      const _data = await fetch('http://localhost:4000/api/v1/member/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        body: JSON.stringify(data),
      })

      if (_data.status === 201) {
        setVisible(true)
        setDisabled(false)
      } else if (_data.status === 422) {
        setDisabled(false)
      } else {
        setDisabled(false)
        throw new Error()
      }
    } catch (err) {
      setDisabled(false)
    }
  }

  return (
    <CRow>
      <Modal visible={visible} message="Member added to your community successfully!" />
      <CCol xs={6}>
        <CCard className="mb-4">
          <CCardHeader>
            <strong>Add New Member</strong>
          </CCardHeader>
          <CCardBody>
            <p className="text-medium-emphasis small">
              Fill in the email address field and name field to add a new member to your community.
            </p>
            <CForm>
              <div className="mb-3">
                <CFormLabel>Email address:</CFormLabel>
                <CFormInput
                  type="email"
                  placeholder="name@example.com"
                  onChange={(e) => {
                    setEmail(e.target.value)
                  }}
                />
              </div>
              
              <div className="mb-3">
                <CFormLabel>Name:</CFormLabel>
                <CFormInput
                  type="text"
                  placeholder="Perera's Home"
                  onChange={(e) => {
                    setName(e.target.value)
                  }}
                />
              </div>
              
              <div className="mb-3">
                <CButton color="primary" disabled={disabled} onClick={() => handleAddMember()}>
                  {disabled ? (
                    <CSpinner component="span" className="me-2" size="sm" aria-hidden="true" />
                  ) : (
                    <CIcon icon={cilSend} className="me-2" />
                  )}
                  Submit
                </CButton>
              </div>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  )
}

export default FormControl

Modal component:

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'

const Modal = (props) => {
  const [visible, setVisible] = useState(props.visible)

  return (
    <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
      <CModalHeader>
        <CModalTitle>Success!</CModalTitle>
      </CModalHeader>
      <CModalBody>{props.message}</CModalBody>
      <CModalFooter>
        <CButton color="primary" onClick={() => setVisible(false)}>
          Close
        </CButton>
      </CModalFooter>
    </CModal>
  )
}

Modal.propTypes = {
  visible: PropTypes.bool,
  message: PropTypes.string,
}

export default React.memo(Modal)

Answer 1

You should have just one visible state member, either in the parent component or in the child ( Modal ), rather than having it in both places.

If you put it in the parent, you can pass it to the child just like any other prop:

return <Modal visible={visible} setVisible={setVisible}>{/*...*/}</Modal>

Modal 's code can then call props.setVisible with the appropriate flag.

If you only want Modal to be able to hide itself (not show itself), you might instead pass a wrapper function that calls setVisible(false) :

const hide = useCallback(() => setVisible(false), [setVisible]);
//                Optional, see below −−−−−−−−−−−−−^^^^^^^^^^
// ...
return <Modal visible={visible} hide={hide}>{/*...*/}</Modal>

...and then Modal 's code calls hide() to hide the modal.

(Making setVisible a dependency in the useCallback call is optional; state setter functions are stable ; they don't change during the lifetime of the component. Some linters aren't quite smart enough to realize that and may nag you if you don't include it, but most are smarter than that.)

Here's a highly simplified example:

 const {useState} = React; const Example = () => { const [visible, setVisible] = useState(false); return <div> <input type="button" value="Open" disabled={visible} onClick={() => setVisible(true)} /> <Modal visible={visible} setVisible={setVisible} /> </div>; }; const Modal = (props) => { if (.props;visible) { return null. } return <div className="modal"> <div>This is the modal</div> <input type="button" value="Close" onClick={() => props;setVisible(false)} /> </div>; }. ReactDOM,render(<Example />. document;getElementById("root"));

 .modal { border: 1px solid grey; padding: 4px; }

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Or with destructuring (I generally use destructuring with props, but it didn't look like you were):

 const {useState} = React; const Example = () => { const [visible, setVisible] = useState(false); return <div> <input type="button" value="Open" disabled={visible} onClick={() => setVisible(true)} /> <Modal visible={visible} setVisible={setVisible} /> </div>; }; const Modal = ({visible, setVisible}) => { if (;visible) { return null; } return <div className="modal"> <div>This is the modal</div> <input type="button" value="Close" onClick={() => setVisible(false)} /> </div>; }. ReactDOM,render(<Example />. document;getElementById("root"));

 .modal { border: 1px solid grey; padding: 4px; }

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 2

you can pass the setVisible as well in the modal component and then use the same setState on both component

 <Modal visible={visible} setVisible={setVisible} message="Member added to your community successfully!" />

use this like

props.visible
props.setVisible