Question

您好我正在创建一个简单的CRUD应用程序，一切正常。最初，当您想要从此列表中删除某些内容时，您会点击“删除”按钮，它将删除该项目。然后我决定在删除按钮上实现一个模态函数，这意味着移动并添加一些代码。多数民众赞成在我有很多麻烦。我已经使用npm安装了react-bootstrap。我在下面给出了我的代码。我创建了一个新组件ModalItem并从TableRow组件中删除了handlsubmit函数，并将其放入模态组件中。在最初有handleubmit函数的TableRow组件中，我放了一个if / else show函数和一个toggleModal函数，并修改了delete按钮以获得模态模态功能，而不是带到后端服务器（现在由删除处理）模态中的按钮。代码现在不能正常工作。另外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')
);

后端节点代码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

您要渲染的任何内容都需要位于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

React中的模态不起作用。显示错误

1 个答案: