Как реализовать этот вспомогательный метод без изменения состояния или рефакторинга на компонент класса? - PullRequest
Новая
       8

Как реализовать этот вспомогательный метод без изменения состояния или рефакторинга на компонент класса?

2 голосов
/ 05 июня 2019

Я добавляю функцию в обзор формы опроса, чтобы пользователь мог загружать файлы, и меня беспокоит то, что я не хочу изменять состояние с помощью этой реализации, как мне выполнить рефакторинг ниже, чтобы гарантировать это?Является ли мой единственный вариант рефакторинга его компонентом на основе классов? 

// SurveyFormReview shows users their form inputs for review
import _ from "lodash";
import React from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

import formFields from "./formFields";
import * as actions from "../../actions";

export const onFileChange = event => {
  this.setState({ file: event.target.files });
};

const SurveyFormReview = ({ onCancel, formValues, submitSurvey, history }) => {
  this.state = { file: null };

  const reviewFields = _.map(formFields, ({ name, label }) => {
    return (
      <div key={name}>
        <label>{label}</label>
        <label>{formValues[name]}</label>
      </div>
    );
  });

  return (
    <div>
      <h5>Please confirm your entries</h5>
      {reviewFields}
      <h5>Add an Image</h5>
      <input
        onChange={this.onFileChange.bind(this)}
        type="file"
        accept="image/*"
      />

Или у меня нет другого выбора, кроме как преобразовать его в компонент на основе классов как лучший курс?

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

Если вы не хотите трогать существующий код, вы можете создать HOC 

const withFile = (Component) => class extends React.Component {
  state = { file: null }
  render() {
    return <Component {...this.props} file={file} onAttach={files => this.setState({ file: files }) />
  }
}

export default withFile(SurveyForm)

Теперь ваша форма получит file и onAttach в качестве реквизита.

0 голосов
/ 05 июня 2019

Вы должны преобразовать это в класс.Что-то вроде этого должно работать 

class SurveyFormReview extends React.Component {
  state = { file: null };

  onFileChange = event => {
    this.setState({ file: event.target.files });
  };

  render() {
    const { onCancel, formValues, submitSurvey, history } = this.props

    const reviewFields = _.map(formFields, ({ name, label }) => {
      return (
        <div key={name}>
          <label>{label}</label>
          <label>{formValues[name]}</label>
        </div>
      );
    });

    return (
      <div>
        <h5>Please confirm your entries</h5>
        {reviewFields}
        <h5>Add an Image</h5>
        <input
          onChange={this.onFileChange}
          type="file"
          accept="image/*"
        />
      </div>
    )
  }
}

, просто как заметка об оптимизации и прочем.

Поскольку это форма, я рекомендую вам использовать лучшие элементы HTML.

const reviewFields = _.map(formFields, ({ name, label }) => {
  return (
    <fieldset key={name}>
      <span>{label}</span>
      <span>{formValues[name]}</span>
    </fieldset>
  );
});

label элементы обычно используются с input элементами.fieldset элементы обычно для групп форм данныхВы можете использовать элемент legend для заголовка вашего набора полей, если хотите:)

...