Невозможно обновить состояние с загрузчиком файлов в reactJS - PullRequest
Новая
       21

Невозможно обновить состояние с загрузчиком файлов в reactJS

0 голосов
/ 16 апреля 2020

Я создал простой компонент для загрузки изображений, который отображается в форме new-image, расширяющей форму. но при обработке изменения (загрузка изображения) состояние обновляется пустым объектом (а не объектом файла). Я пытался отладить его, но все идет правильно до 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;

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Но точно такой же способ работает для меня с пользовательским вводом текста и пользовательскими полями выбора, см. Различия: 

  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 });
  };
0 голосов
/ 16 апреля 2020

Прежде всего, реагирование не рекомендует использование расширений из-за комбинации расширений.

В компоненте Form setState() вызывает render(), но нет render(). setState не разрешает повторное выполнение renderUploadFile.

Было бы неплохо использовать компонент UploadImage в компоненте NewImagesForm. Не позволяйте NewImagesForm расширять форму.

...