如何在子组件中重置父组件的状态?

Question

我正在尝试触发一个模态，以便在我的表单中出现错误时出现。

在我的app.js文件中，我有这个处理程序函数，当字段为空时调用：

const [modalShow, setModalShow] = useState(false);
const [modalMessage, setModalMessage] = useState('');
const alertModalHandler = () => {
setModalShow(true);
setModalMessage('User name field blank');
}

这些道具又被发送到 Modal 上的模态组件.js：

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

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

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。

有人知道我该怎么做吗？

我的完整应用程序.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中，作为道具传递setModalShowAlertModal如下所示：

<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;

Answer 2

不要从 props 创建派生状态，而是将回调从父级传递到子级，并在父级中维护状态。

应用程序

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

将handleModalClose作为句柄传递到AlertModal组件关闭道具

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

警报模态

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