javascript - 如何在子组件中重置父组件的状态？

Question

当我的表单出现错误时，我试图触发一个模式来显示。

在我的 app.js 文件中，我有一个处理函数，当字段为空时调用该函数:

  const [modalShow, setModalShow] = useState(false);
  const [modalMessage, setModalMessage] = useState('');

  const alertModalHandler = () => {
    setModalShow(true);
    setModalMessage('User name field blank');
  }

这些 props 依次发送到 Modal.js 上的模态组件:

<AlertModal modalOpen={modalShow} modalText={modalMessage}/>

在 Modal.js 上我有它，因此它使用 useEffect 来读取 props 并在模态组件上设置打开/关闭状态。

const AlertModal = (props) => {

  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {if (props.modalOpen) {
    setIsOpen(true);
  }}, [props.modalOpen])

  const handleClose = () => setIsOpen(false);

  return (
    <Modal show={isOpen} onHide={handleClose}>
      <Modal.Header closeButton>Alert</Modal.Header>
      <Modal.Body>{props.modalText}</Modal.Body>
    </Modal>
  );
};

export default AlertModal;

这有效......但只有一次，因为当模态关闭时(当 isOpen 时)，我似乎无法从 modal.js 中重置 modalShow 是假的)。

有人知道我该怎么做吗？

我的完整 App.js 代码是:

import React, { useState } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import AddUserForm from './components/addUserForm';
import UserList from './components/userList';
import AlertModal from './components/modal';

function App() {

  const [users, setUsers] = useState([]);
  const [modalShow, setModalShow] = useState(false);
  const [modalMessage, setModalMessage] = useState('');

  const addPersonHandler = (nameValue, ageValue) => {
    setUsers(prevUsers => {
      const updatedUsers = [...prevUsers];
      updatedUsers.unshift({ name: nameValue, age: ageValue });
      return updatedUsers;
    });
  };

  const alertModalHandler = () => {
    setModalShow(true);
    setModalMessage('User name field blank');
  }

  let content = (
    <p style={{ textAlign: 'center' }}>No users found. Maybe add one?</p>
  );

  if (users.length > 0) {
    content = (
      <UserList items={users} />
    );
  }

  return (
    <>
      <div className="container">
        <div className="row">
          <div className="col-md-6 offset-md-3">
            <AddUserForm onAddPerson={addPersonHandler} fireAlertModal={alertModalHandler}/>
          </div>
        </div>
        <div className="row">
          <div className="col-md-6 offset-md-3">
            {content}
          </div>
        </div>
      </div>
      <AlertModal modalOpen={modalShow} modalText={modalMessage}/>
    </>
  );
}

export default App;

Answer 1

在App.js中，将setModalShow作为 Prop setModalShow传递给AlertModal，如下所示:

<AlertModal modalOpen={modalShow} modalText={modalMessage} setModalShow={setModalShow}/>

然后在 AlertModal.js 中(请注意，我简化了代码，对于您想要执行的操作，您不需要 state 和 useEffect) :

const AlertModal = (props) => {

  return (
    <Modal show={props.modalOpen} onHide={()=> props.setModalShow(false)}>
      <Modal.Header closeButton>Alert</Modal.Header>
      <Modal.Body>{props.modalText}</Modal.Body>
    </Modal>
  );
};

export default AlertModal;