如果仅编辑一个输入字段，为什么可编辑输入字段会提交空字符串？

Question

我正在尝试创建一个非常简单的内容管理系统，用于创建和更新博客文章。我成功地创建和删除了博客文章，但是在尝试编辑它们时遇到了麻烦。

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

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

如果我使用测试数据编辑Blog Topic之类的1个字段并提交更改，则“博客图片”和“博客内容”中的数据将丢失，并且即使以前有数据也没有提交任何内容，不知道为什么。但是，如果每当我保存进行更改时都将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}
/>