验证后如何移除模态

Question

目标:
当你按下提交按钮时，在模态内部，如果验证是OK的，那么模态弹出框将被删除。
您应该启用再次重用模态，但对于另一行。

问题:
我试图删除模态，但之后的功能不工作，当你尝试在表中的另一行。
我遗漏了代码的哪一部分?

信息:
* reactjs新手

依赖性:
"bootstrap":"^ 4.6.0"
"react":"^ 17.0.2"
"react-bootstrap":"^ 1.6.1"
"react-dom":"^ 17.0.2"
"react-router-dom":"^ 5.2.0"
"react-scripts":"4.0.3",

谢谢!

---

import './App.css';
import Tenant from './components/Tenant';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<Router>
<div className="App">
<Link to="/Tenant">Guest</Link>
<div>
<Route path="/tenant" component={Tenant} />
</div>
</div>
</Router>
);
}
export default App;

---

import React, { Component } from 'react';
import ModalForm from './ModalForm';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
export default class Tenant extends Component { 
constructor() {
super();
}
state = {
isLoaded: false,
listTenant: {},
isOpen: false,
title: "",
body: ""
};
openModal(titleData, bodyData) {
this.setState({ isOpen: true });
this.setState({ title: titleData });
this.setState({ body: bodyData });
}
closeModal = () => this.setState({ isOpen: false });  

componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(results => results.json())
.then(data => this.setState({
isLoaded: true,
listTenant: data,
}))
.catch(err => console.log(err)) 
}
render() {
const listTenant = this.state.listTenant;
const { isLoaded } = this.state;
if (!isLoaded) {
return (<div>Loading...</div>);
} else {
return (
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>userId</th>
<th>title</th>
<th></th>
</tr>
</thead>
<tbody>
{
this.state.listTenant &&
this.state.listTenant.map((item) => {
return (
<tr key={item.id.toString()}>
<td>{item.id}</td>
<td>{item.userId}</td>
<td>{item.title}</td>
<td>
<button className="btn btn-primary" onClick={() => this.openModal(item.id, item.title)} >Display Modal Form</button>
</td>
</tr>          
);
})
}
</tbody>
</table>
{
this.state.isOpen ?
<ModalForm
closeModal={this.closeModal}
isOpen={this.state.isOpen}
title= {this.state.title}
body= {this.state.body}
/>
:
null
}
</div>
);
} 
}
}

---

import Form from 'react-bootstrap/Form'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/button'
import React, { Component } from 'react';
export default class ModalForm extends Component {
constructor(props) {
super(props);
}
state= { 
name: '',
title: this.props.title,
body: this.props.body,
}
handleChange = (e) => this.setState({name: e.target.value})
handleSubmit = () => {
console.log(this.state.name);
if (this.state.name == 'aa')
{
alert("aa");
// close this modal
}
else
{
alert("validation is error");
}
};
render() {
return(
<Modal 
show={this.props.isOpen} 
onHide={this.props.closeModal}
>
<Modal.Header closeButton>
<Modal.Title>{this.state.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group >
<Form.Label>Name: </Form.Label>
<Form.Control type="text" onChange={this.handleChange} value={this.state.name} placeholder="name input"/>
{ this.state.body }   
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" type="submit" onClick={this.handleSubmit}>
Submit
</Button>
</Modal.Footer>
</Modal>
)
}
}

Answer 1

添加this.props.closeModal

handleSubmit = () => {
console.log(this.state.name);
if (this.state.name == "aa") {
alert("aa");
// close this modal
this.props.closeModal();
} else {
alert("validation is error");
}
};

Answer 2

添加this.setState({ isOpen: false })到handleSubmit:

handleSubmit = () => {
console.log(this.state.name);
if (this.state.name == 'aa') {
alert("aa");
// close this modal
this.setState({ isOpen: false })
} else {
alert("validation is error");
}
}