node.js - React 中的模态不起作用。显示错误

Question

您好，我正在创建一个简单的 CRUD 应用程序，一切正常。最初，当您想从此列表中删除某些内容时，您可以点击“删除”按钮，它就会删除该项目。然后我决定为删除按钮实现一个模态函数，这意味着移动并添加一些代码。那是我遇到很多麻烦的时候。我已经使用 npm 安装了 React-bootstrap。我在下面给出了我的代码。我创建了一个新组件 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

TableRow.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')
);

后端 Node 代码ItemRoutes.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

您想要渲染的任何内容都需要位于渲染器内。

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