Как создать шаблон HOC с избыточной формой? - PullRequest
0 голосов
/ 01 апреля 2019

Я пытаюсь создать шаблон HOC с избыточной формой, но я сталкиваюсь с ошибками.

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

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { reduxForm, getFormValues } from 'redux-form'
import { renderOptions } from './../common/formatData'
import { getQuestions, initializeSurveys, submitEligibilityCheck } from        '../../actions/surveysAction'
// import { submitEligibilityCheck } from '../../actions/eligibilityCheckAction'

let EligibilityWrapper = (WrappedComponent) => {
  return class extends Component {
    constructor(props) {
      super(props)
      this.state = {
        page: 1,
        check: true,
        refs: [],
        start_time: 0
      }
      this.formSubmit = this.formSubmit.bind(this)
      this.renderQuestions = this.renderQuestions.bind(this)
      this.defineRefs = this.defineRefs.bind(this)
    }

    componentWillReceiveProps(nextProps) {
      let obj = {}
      let scrollToElement = 0;
      if (this.state.check && nextProps.survey_data) {
        nextProps.survey_data.section.map((item, i) => {
          let question_code = item.question_code
          let answer = item.answer ? item.answer : null
          obj[question_code] = answer
          if (item.answer) {
            scrollToElement = item.question_code
          }
        })
        if (scrollToElement != 0 && screen.width >= 1041) {
          let element = this.state.refs.find((ele) => ele.id == scrollToElement)
          element.scrollIntoView({ behavior: 'smooth' })
        }
        this.props.initialize(obj)
        this.setState({ check: false })
      }
    }

    defineRefs(domElement) {
      if (domElement) {
        this.setState({ refs: this.state.refs.push(domElement) })
      }
    }

    componentDidMount() {
      this.setState({ start_time: new Date() })
    }

    formSubmit(values, tab) {
      let obj = {}
      let count = 0
      let is_draft = true
      let attempt_id = this.props.survey_data[tab].attempt_id
      let survey_section = this.props.survey_data[tab].section;

      for (var property in values) {
        if (values.hasOwnProperty(property)) {
          if (values[property] && !_.isEmpty(values[property])) {
            count++
            obj[property] = { answer_text: values[property] }
            Object.assign({}, obj, obj[property])
          }
        }
      }
      if ((Object.keys(obj).length == survey_section.length) && this.props.survey_data[tab]       .is_draft == null) {
        // making is_draft true / false based on user input and skipped count
        is_draft = false
      }
      let stop_time = new Date()
      let time_taken = ((stop_time.getTime() - this.state.start_time.getTime()) / 1000).toFixed(0)
      this.props.submitEligibilityCheck(obj, attempt_id, is_draft, time_taken, Object.keys(obj)       .length)
    }

    renderQuestions(questions) {
      if (questions && questions.length > 0) {
        return questions.map((item, i) => {
          return (
            <div className='c-s-ques' key={i} ref={this.defineRefs} id={item.question_code}>
              {(<div>
                {item.default_text && (
                  <label className='main-heading'>
                    <b>{item.default_text}</b>
                  </label>
                )}
                <p>{item.question_text}</p>
                {renderOptions(item)}
              </div>
              )}
            </div>
          )
        })
      }
    }

    render() {
      return (
        <WrappedComponent {...this.props}
          formSubmit={this.formSubmit}
          renderQuestions={this.renderQuestions}
        />
      )
    }
  }
}

EligibilityWrapper = reduxForm({
  destroyOnUnmount: false
})(EligibilityWrapper)

const mapStateToProps = state => ({
  survey_data: state.surveysReducer.data.survey_section,
  // WrappedComponent: state.form.WrappedComponent
})

const composedEligibilityWrapper = compose(
  connect(mapStateToProps, { getQuestions, initializeSurveys, submitEligibilityCheck }),        EligibilityWrapper
)

export default composedEligibilityWrapper

Я получаю ошибку

Uncaught TypeError: Cannot call a class as a function
at _classCallCheck (createReduxForm.js:12)
at ReduxForm (createReduxForm.js:812)
at redux.js:523
at Object../client/src/components/InfectedEligibilityCheck/EligibilityComorbidity.js (EligibilityComorbidity.js:58)
at __webpack_require__ (bootstrap:724)
at fn (bootstrap:101)
at Object../client/src/components/InfectedEligibilityCheck/EligibilityFormHeader.js (EligibilityFormHeader.js:7)
at __webpack_require__ (bootstrap:724)
at fn (bootstrap:101)
at Object../client/src/Routes/index.js (index.js:21)

Я хочу получить значения формы из state.form.formname

...