mysql - 如果我只编辑一个输入字段，为什么我的可编辑输入字段会提交空字符串？

Question

我正在尝试创建一个非常简单的内容管理系统来创建和更新博客文章。我设法成功地创建和删除了博客文章，但是当我尝试编辑它们时，我无法集中精力。

我遇到的问题是，如果我有 3 个可编辑的博客文章字段。

1) 博客主题2)博客图片3) 博客内容

如果我用测试数据编辑 1 个字段，例如 Blog Topic 并提交更改，那么 Blog Picture 和 Blog Content 中的数据会丢失并且不会提交任何内容，即使之前有数据我不确定为什么。但是，如果我每次保存更改时都将 defaultValue 设置为我的状态，问题就会得到解决，但我希望我的输入在该字段中也具有初始值。

这是我的代码:

import React from "react";
import ReactDOM from "react-dom";

import Header from "../common/Header";
import Footer from "../common/Footer";
import Adminediting from "../common/isEditing";
import Addblogtopic from "./Addblogtopic";

import { Modal, Button } from "react-bootstrap";
import { Link, Redirect } from "react-router-dom";
import Moment from "moment";
import dataTip from "data-tip";
import { confirmAlert } from "react-confirm-alert";
import CKEditor from "ckeditor4-react";

import blogtopicsService from "../../services/Blogservice";
import appController from "../../controllers/appController";

class Blogtopics extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      blogData: [],
      blogCategory: "",
      blogContent: "",
      blogId: "",
      hoverSelected: false,
      isEditing: false,
      fileObject: "",
      fileName: "",
      fileSize: "",
      fileType: "",
      filePayload: "",
      blogPicture: "",
      email: "",
      firstName: "",
      lastName: "",
      roleId: "",
      userId: "",
      errorMsg2: false,
      errorMsg3: false
    };
  }

  Selectblogtopics = async () => {
    const blogTopics = await blogtopicsService.selectblogTopics();

    this.setState({
      blogData: blogTopics
    });
  };

  toggleHover = hoverState => {
    this.setState({ hoverSelected: hoverState });
  };

  updateImage = e => {
    let file = e.target.files[0];
    var dataTypeURL = new FileReader();
    var arrayBuffer = new FileReader();
    this.setState({
      fileObject: file,
      fileName: file.name,
      fileSize: file.size,
      fileType: file.type
    });

    dataTypeURL.onload = e => {
      this.setState({
        filePayload: e.target.result,
        blogPicture: e.target.result
      });
    };
    dataTypeURL.readAsDataURL(file);
    arrayBuffer.readAsArrayBuffer(file);
  };

  editBlog = editingState => {
    this.setState({
      isEditing: !editingState
    });

      //Publish Changes
      setTimeout(async () => {
        this.setState({
          isLoading: false
        });

        const uploadData = {
          blogCategory: this.state.blogCategory,
          blogContent: this.state.blogContent,
          modifiedDate: Moment().format("YYYY-MM-DD hh:mm:ss"),
          blogId: this.state.blogId,
          fileType: this.state.fileType,
          fileName: this.state.fileName,
          fileSize: this.state.fileSize,
          filePayload: this.state.filePayload
        };

        const updateBlog = await blogtopicsService.editBlog(uploadData);

        location.href = "/blog";
      }, 1000);
    }
  };

  handleClose = () => {
    this.setState({ show: false });
  };

  handleShow = () => {
    this.setState({ show: true });
  };

  onChange = async (e, blogId) => {
    await this.setState({
      [e.target.name]: e.target.value,
      blogId: blogId
    });
  };

  deleteBlog = blogId => {
    confirmAlert({
      customUI: ({ onClose }) => {
        return (
          <div className="custom-ui">
            <h1>Are you sure</h1>
            <p>You want to delete this blog?</p>
            <button onClick={onClose}>Cancel</button>
            <button
              onClick={() => {
                this.confirmDelete(blogId);
                onClose();
              }}
            >
              Confirm
            </button>
          </div>
        );
      }
    });
  };

  confirmDelete = async blogId => {
    // Delete the blog
    const deleteBlog = await blogtopicsService.deleteBlog({ blog_id: blogId });

    // Re-render the blog posts after deleting
    await this.Selectblogtopics();
  };

  async componentDidMount() {
    await this.userData();
    await this.Selectblogtopics();
  }

  render() {
    return (
      <div className="fluid-container">
        <div className="blogContainer">
          <Header />
            <Adminediting
              title={this.props.match.path}
              editState={this.editBlog}
            />
          <div className="container">
              <div className="editSection">
                <div className="text-right">
                  <span className="data-tip-bottom" data-tip="Add Blog Post">
                    <i className="fas fa-plus" onClick={this.handleShow} />
                  </span>
                </div>
              </div>
            <div className="blogContent">
              {this.state.blogData.map((rows, index) => (
                <div className="blogWrapper" key={index}>
                  {rows.blog_status === 1 ? (
                    <div
                      className="row"
                    >
                      <Modal show={this.state.show} onHide={this.handleClose}>
                        <Modal.Header closeButton>
                          <Modal.Title>Add Blog Post</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                          <Addblogtopic
                            handleClose={this.handleClose}
                            selectblogTopics={this.Selectblogtopics}
                          />
                        </Modal.Body>
                      </Modal>
                      <div className="col-md-4">
                        <img
                          src={
                            "https://s3-us-east-1.amazonaws.com/" +
                            rows.blog_thumbnail
                          }
                          alt="test"
                        />
                        {this.state.isEditing === true ? (
                          <div className="input-group">
                            <input
                              type="file"
                              className="d-block mt-4"
                              name="blogPicture"
                              onChange={e => this.updateImage(e)}
                            />
                          </div>
                        ) : null}
                      </div>
                      <div className="col-md-6">
                        {this.state.isEditing === true ? (
                          <input
                            type="text"
                            name="blogCategory"
                            onChange={e => this.onChange(e, rows.blog_id)}
                            defaultValue={rows.blog_category}
                          />
                        ) : (
                          <Link
                            to={
                              "/blog/" +
                              rows.blog_id +
                              "/" +
                              appController.friendlyUrl(rows.blog_category)
                            }
                            id="blogUrl"
                          >
                            <h3
                              id="blogTopic"
                              dangerouslySetInnerHTML={{
                                __html: rows.blog_category
                              }}
                            />
                          </Link>
                        )}
                        {this.state.roleId === 1 ? (
                          <div className="editSection">
                            <div className="text-right">
                              <span
                                className="data-tip-bottom"
                                data-tip="Delete Blog Post"
                              >
                                <i
                                  className="far fa-trash-alt"
                                  onClick={e => this.deleteBlog(rows.blog_id)}
                                />
                              </span>
                            </div>
                          </div>
                        ) : null}

                        <div
                          className={
                            this.state.hoverSelected == index
                              ? "blogSection hover"
                              : "blogSection"
                          }
                        >
                          {this.state.isEditing === true ? (
                            <CKEditor
                              data={rows.blog_content}
                              onChange={(event, editor) => {
                                const data = event.editor.getData();
                                this.setState({
                                  blogContent: data
                                });
                              }}
                            />
                          ) : rows.blog_content.length > 50 ? (
                            <div
                              className="cmsStyles"
                              dangerouslySetInnerHTML={{
                                __html: rows.blog_content.substr(0, 50) + " ..."
                              }}
                            />
                          ) : (
                            <div
                              className="cmsStyles"
                              dangerouslySetInnerHTML={{
                                __html: rows.blog_content
                              }}
                            />
                          )}
                        </div>
                      </div>
                    </div>
                  ) : null}
                </div>
              ))}
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

export default Blogtopics;

后端数据

var db = require("../dbconnection");
const AWS = require("aws-sdk");

var blog = {
  insertblogPost: function(data, callback) {
    var uniquePicture = "blogphoto" + "-" + data.fileName;
    var awsFolder = "awsfolder" + "/" + uniquePicture;
    db.query(
      "insert blog_topics set blog_category=?, blog_thumbnail=?, blog_content=?, blog_author=?",
      [data.blogTopic, uniquePicture, data.blogContent, "random user"]
    );

    var buf = new Buffer(
      data.filePayload.replace(/^data:image\/\w+;base64,/, ""),
      "base64"
    );

    //Upload file into AWS S3 Bucket
    var s3 = new AWS.S3();
    var params = {
      Bucket: "testbucket",
      Key: awsFolder,
      Body: buf,
      ContentType: data.fileType,
      ACL: "public-read"
    };
    s3.putObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        return data;
      }
    }),
      callback(true);
  },
  deleteBlog: function(data, callback) {
    db.query(
      "UPDATE blog_topics set blog_status=? where blog_id=?",
      ["0", data.blog_id],
      callback
    );
  },
  editBlog: function(data, callback) {
    var uniquePicture = "blogphoto" + "-" + data.fileName;
    var awsFolder = "awsfolder" + "/" + uniquePicture;
    db.query(
      "UPDATE blog_topics set blog_category=?, blog_thumbnail=?, blog_content=?, blog_author=?, modified_date=? where blog_id=?",
      [
        data.blogCategory,
        uniquePicture,
        data.blogContent,
        "Test Username",
        data.modifiedDate,
        data.blogId
      ]
    );

    var buf = new Buffer(
      data.filePayload.replace(/^data:image\/\w+;base64,/, ""),
      "base64"
    );

    //Upload file into AWS S3 Bucket
    var s3 = new AWS.S3();
    var params = {
      Bucket: "awsbucket",
      Key: awsFolder,
      Body: buf,
      ContentType: data.fileType,
      ACL: "public-read"
    };
    s3.putObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        return data;
        //console.log(data);
      }
    }),
      callback(true);
  },
  selectblogTopics: function(data, callback) {
    db.query(
      "select blog_id, blog_category, blog_thumbnail, blog_content, blog_status, blog_author, created_date, modified_date from blog_topics",
      callback
    );
  },
  selectblogArticle: function(data, callback) {
    db.query(
      "select blog_id, blog_category, blog_thumbnail, blog_content, blog_author, created_date from blog_topics where blog_id=?",
      [data.blogId],
      callback
    );
  },
  editArticle: function(data, callback) {
    var uniquePicture = "blogphoto" + "-" + data.fileName;
    var awsFolder = "awsfolder" + "/" + uniquePicture;
    db.query(
      "UPDATE blog_topics set blog_category=?, blog_thumbnail=?, blog_content=?, blog_author=?, modified_date=? where blog_id=?",
      [
        data.blogCategory,
        uniquePicture,
        data.blogContent,
        "test user",
        data.modifiedDate,
        data.blogId
      ]
    );

    var buf = new Buffer(
      data.filePayload.replace(/^data:image\/\w+;base64,/, ""),
      "base64"
    );

    //Upload file into AWS S3 Bucket
    var s3 = new AWS.S3();
    var params = {
      Bucket: "awsfolder",
      Key: awsFolder,
      Body: buf,
      ContentType: data.fileType,
      ACL: "public-read"
    };
    s3.putObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        return data;
      }
    }),
      callback(true);
  }
};

module.exports = blog;

Answer 1

您可以创建一个通用方法来更新所有博客信息。

setBlogProperty(index, propName, propValue) {
  this.setState(state => {
    state.blogData[index][propName] = propValue;
    return state;
  });
};

然后在输入元素的 onChange 事件上调用此方法。

<input
  type="text"
  name="blogCategory"
  onChange={e => this.setBlogProperty(index, 'blog_category', e.target.value)}
  defaultValue={rows.blog_category}
/>