如何使用redux-form创建HOC模板?

时间:2019-04-01 09:22:41

标签: reactjs redux redux-form

我正在尝试创建具有redux形式的HOC模板,但是我遇到了错误。

我想击中组件将接收道具,以便在编辑模式下用api中的值填充redux表单。为此,我需要我无法获得的表单值。

private void EnterTextToolStripMenuItem_Click(object sender, EventArgs e)
        {
            rtbText.Text += "Enter this Text";
        }

我遇到错误

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

我想要state.form.formname中的表单值

0 个答案:

没有答案