无法在 reactJS 中使用文件上传器更新状态答案

【问题标题】：Cannot update state with file uploader in reactJS无法在 reactJS 中使用文件上传器更新状态
【发布时间】：2020-04-16 21:15:16
【问题描述】：

我创建了一个简单的图像上传器组件，它以扩展表单的新图像表单呈现。但是在处理更改（图像上传）时，状态会使用空对象更新（而不是文件对象）。我试图调试它，但在 this.setState 之前一切正常。有人可以帮忙吗？

NewImagesForm：

class NewImagesForm extends Form {
  state = {
    data: {
      _id: 0,
      name: "",
      file: null,
    },
    errors: {},
    apiEndpoint: "",
  };

  render() {
    return (
      <div className="new-menu-item-form">
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("name", "Name")}
          {this.renderUploadFile("file", "Upload")}
          {this.renderButton("Add")}
        </form>
      </div>
    );
  }

表格

class Form extends Component {
  state = { data: {}, errors: {} };

  handleFileUpload = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.target.files[0];
    this.setState({ data });
  };

  renderUploadFile(name, label) {
    const { data } = this.state;

    return (
      <UploadImage
        name={name}
        label={label}
        value={data[name]}
        onChange={this.handleFileUpload}
      ></UploadImage>
    );
  }
}

导出默认表单；

文件上传组件

const UploadImage = ({ name, label, error, onChange }) => {
  return (
    <div className="input-group">
      <div className="custom-file">
        <input
          type="file"
          onChange={onChange}
          className="custom-file-input"
          id={name}
          name={name}
        ></input>
        {label && (
          <label className="custom-file-label" htmlFor={name}>
            {label}
          </label>
        )}
      </div>
      <div className="input-group-append">
        <button className="btn btn-outline-secondary" type="button">
          Button
        </button>
      </div>
    </div>
  );
};

export default UploadImage;

【问题讨论】：

标签： reactjs file-upload event-handling

【解决方案1】：

首先react不推荐使用extends，因为extends的组合。

在Form 组件中，setState() 触发了render()，但没有render()。 setState 不允许重新执行 renderUploadFile。

在 NewImagesForm 组件中使用 UploadImage 组件是个好主意。不要让 NewImagesForm 扩展 Form。

【讨论】：

【解决方案2】：

但是对于我来说，自定义输入文本和自定义选择框的方式完全相同，请查看差异：

  handleChange = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.currentTarget.value;
    this.setState({ data });
  };

  handleFileUpload = (e) => {
    const data = { ...this.state.data };
    data[e.currentTarget.name] = e.target.files[0];
    this.setState({ data });
  };

【讨论】：