反应中的模态不起作用.显示错误

Question

您好，我正在创建一个简单的 CRUD 应用程序，一切正常。最初，当您想从此列表中删除某些内容时，您点击了"删除"按钮，它将删除该项目。然后我决定为删除按钮实现一个模态函数，这意味着移动和添加一些代码。那是我遇到很多麻烦的时候。我已经使用 npm 安装了反应引导程序。我在下面给出了我的代码。我创建了一个新的组件 ModalItem 并从 TableRow 组件中删除了 handlsubmit 函数，并将其放在模态组件中。在 TableRow 组件中，最初有 handlesubmit 函数，我放置了一个 if/else show 函数和一个 toggleModal 函数，并修改了删除按钮以具有模态模态功能，而不是带到后端服务器(现在由模态中的删除按钮处理。代码现在不起作用。加上 VS 代码说由于某种原因我在导出默认 ModalItem 语句中存在错误。请帮忙。

ModalItem.js
import React from 'react';
import {Link} from 'react-router-dom';
import PropTypes from 'prop-types';
import ItemService from './ItemService';
class ModalItem extends Component {
constructor(props) {
super(props);
this.addItemService = new ItemService();
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
// Render nothing if the "show" prop is false
if(!this.props.show) {
return null;
}
handleSubmit(event) {  //this is showing error at the curly bracket. unexpected token. not sure whats wrong here
event.preventDefault();
this.addItemService.deleteData(this.props.obj._id);
}
return(
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Ready to Delete Student</Modal.Title>
</Modal.Header>
<Modal.Body>Are you sure you want to delete this Student?</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onClose}>Close</Button>
<form onSubmit={this.handleSubmit}>
<input type="submit" value="Delete" className="btn btn-danger"/>
</form>
</Modal.Footer>
</Modal.Dialog>
</div>
); 
}
export default ModalItem; //showing error

表行.js

class TableRow extends Component {
constructor(props) {
super(props);
this.addItemService = new ItemService();
this.state = {isOpen: false}; 
}
toggleModal = () => {
this.setState({
isOpen: !this.state.isOpen
});
}

render() {
return (
<tr>
<td>
{this.props.obj._id}
</td>
<td>
{this.props.obj.item}
</td>
<td>
<Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
</td>
<td>
<button onClick={this.toggleModal}>
Delete
</button>
<div>
<Modal show={this.state.isOpen}
onClose={this.toggleModal}>
</Modal>
</div>
</td>
</tr>
);
}
}
export default TableRow;
index.js
import App from './App';
import AddItem from './components/AddItem';
import IndexItem from './components/IndexItem';
import EditItem from './components/EditItem';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/add-item' component={AddItem} />
<Route path='/index' component={IndexItem} />
<Route path='/edit/:id' component={EditItem} />
</div>
</Router>,
document.getElementById('root')
);

后端节点代码项路由.js

var express = require('express');
var app = express();
var itemRouter = express.Router();
// Require Item model in our routes module
var Item = require('../models/Item');
// Defined store route
itemRouter.route('/add/post').post(function (req, res) {
var item = new Item(req.body);
item.save()
.then(item => {
res.status(200).json({Item: 'Item added successfully'});
})
.catch(err => {
res.status(400).send("unable to save to database");
});
});
// Defined get data(index or listing) route
itemRouter.route('/').get(function (req, res) {
Item.find(function (err, itms){
if(err){
console.log(err);
}
else {
res.json(itms);
}
});
});
// Defined edit route
itemRouter.route('/edit/:id').get(function (req, res) {
var id = req.params.id;
Item.findById(id, function (err, item){
res.json(item);
});
});
//  Defined update route
itemRouter.route('/update/:id').post(function (req, res) {
Item.findById(req.params.id, function(err, item) {
if (!item)
return next(new Error('Could not load Document'));
else {
// do your updates here
item.item = req.body.item;
item.save().then(item => {
res.json('Update complete');
})
.catch(err => {
res.status(400).send("unable to update the database");
});
}
});
});
// Defined delete | remove | destroy route
itemRouter.route('/delete/:id').get(function (req, res) {
Item.findByIdAndRemove({_id: req.params.id},
function(err, item){
if(err) res.json(err);
else res.json('Successfully removed');
});
});
module.exports = itemRouter;

请帮助我修复modalItem.js和TableRow中的错误.js因为这是我进行所有修改以包含此模态元素的地方(现在导致问题(

Answer 1

您想要渲染的任何内容都需要在render内。

ModalItem.js
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import ItemService from './ItemService';
class ModalItem extends React.Component {
constructor(props) {
super(props);
this.addItemService = new ItemService();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {  //this is showing error at the curly bracket. unexpected token. not sure whats wrong here
event.preventDefault();
this.addItemService.deleteData(this.props.obj._id);
}
render() {
// Render nothing if the "show" prop is false
if (!this.props.show) {
return null;
}
else {
return (
<div className="static-modal">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Ready to Delete Student</Modal.Title>
</Modal.Header>
<Modal.Body>Are you sure you want to delete this Student?</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onClose}>Close</Button>
<form onSubmit={this.handleSubmit}>
<input type="submit" value="Delete" className="btn btn-danger" />
</form>
</Modal.Footer>
</Modal.Dialog>
</div>
);
}
}
}
}
export default ModalItem; //showing error