时间戳

首页 > 解决方案 > 我使用 React.js 制作的管理面板的博客文章编辑按钮出现问题

javascript - 我使用 React.js 制作的管理面板的博客文章编辑按钮出现问题

问题描述

我使用 React.js 创建了一个管理面板。我希望能够从这里查看和编辑网站上的博客文章。为此，我在数据来源的表格元素中添加了一个按钮。此按钮从 react-strap 触发模式。但是，当这个modal打开时，我只能得到表格底部的post数据。我在我带来数据的地图函数中调用了模态，通过发送每个博客帖子的 ID 值，这样页面上有多少数据，模态渲染的数量就是。但是，当我单击编辑按钮时，会触发所有模式。我该如何解决这个问题？

我留下了我正在尝试处理的博客页面的代码：

import React, { Component, useState } from 'react';
import { Container, Table, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';



export default class Blog extends Component {

    componentDidMount() {
        this.getBlogPosts();
      
    }

    state = {
        blogPosts: [],
        columns: [
            { name: 'Header', selector: 'header' },
            { name: 'Description', selector: 'description' },
            { name: 'Keywords', selector: 'keywords' },
            { name: 'Body', selector: 'body' },
            { name: 'Create Time', selector: 'createdAt' }
        ],
        modal: false
    }

    toggle = (event) => {
        this.setState({ modal: this.state.modal == false ? true : false });
    }

    getBlogPosts = () => {

        fetch("http://localhost:5000/api/blog")
            .then((response) => response.json())
            .then((response) => { console.log(response); return response; })
            .then((response) => this.setState({
                blogPosts: response.data
            }));
    }


    render() {
        return (
            <Container>
                {this.state.blogPosts.map(posts=>
                  
                  <Modal isOpen={this.state.modal} id={posts._id} toggle={this.toggle} className={this.props.className}>
                      <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                      <ModalBody>
                          {posts.title}
                          </ModalBody>
                      <ModalFooter>
                          <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                          <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                      </ModalFooter>
                  </Modal>
             
                )}
                
                <Table striped className="display">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Tag</th>
                            <th>Operations</th>
                        </tr>
                    </thead>
                    <tbody> 
                        {this.state.blogPosts.map(post =>
                            <tr key={post._id} >
                                <td> {post.title} </td>
                                <td> {post.description} </td>
                                <td> {post.category} </td>
                                <td> {post.tag} </td>
                                <td> <Button color="primary" onClick={this.toggle}><FaIcons.FaEdit/></Button></td>
                            </tr>

                        )}
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Tag</th>
                        </tr>
                    </tfoot>
                </Table>

            </Container>

        )
    }
}

以前，我将按钮元素转换为<a>元素，并将每个 ID 值传递给<a>元素的 href 属性。然而，结果又不好了。

标签： javascriptreactjs

解决方案

您只需要为特定 ID 的博客文章而不是每个博客文章切换模式，像这样修改表格行

<tr key={post._id} >
    <td> {post.title} </td>
    <td> {post.description} </td>
    <td> {post.category} </td>
    <td> {post.tag} </td>
    {/** Note the toggle function **/
    <td> <Button color="primary" onClick={() => this.toggle(post._id)}><FaIcons.FaEdit/></Button></td>
</tr>

在您的切换功能中

 // note the id param
 toggle = (id) => {
     this.setState({ modal: this.state.modal == false ? true : false, id }); // set the id of the blog post in state
 }

在您的 Modal 中仅打开 id 匹配的模态

<Modal isOpen={this.state.modal && (this.state.id === posts.id)} id={posts._id} toggle={() => this.toggle(posts.id)} className={this.props.className}>
    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
    <ModalBody>
        {posts.title}
        </ModalBody>
    <ModalFooter>
        <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
        <Button color="secondary" onClick={this.toggle}>Cancel</Button>
    </ModalFooter>
</Modal>

我希望你能明白。

推荐阅读