Создание собственного HOC с помощью Formsy

Я пытаюсь создать свой собственный Formsy HOC, может кто-нибудь сказать мне, почему код ниже не работает? Или как я мог получить такую ​​же функциональность? Или я должен просто обернуть компонент другим компонентом, а не HOC?

Дополнительный текст, потому что Stack не позволяет мне публиковать мой вопрос.... Дополнительный текст, потому что Stack не позволяет мне публиковать этот вопрос. Все еще недостаточно? Хорошо, еще немного текста, мне очень жаль, но компьютер говорит нет. Это фантастическое правило для размещения вопросов. Я думаю о том, чтобы сдаться.

Мой HOC

import React, { Component } from 'react'
import Formsy from 'formsy-react';
import { connect } from "react-redux";


function WizardStep(WrappedComponent) {
    return class extends React.Component {
        constructor(props) {
            super(props);
        }
        form = React.createRef()

        componentDidMount = () => {
            //check for initial values
        }

        componentWillUnmount = () => {
            //save values
        }

        onChange = (form) => {
            // ???
            console.log(form)
        }

        onSubmit = (form) => {
            // ???
        }

        render() {
            return (
                <Formsy
                    ref={comp => this.form = comp}
                    onValid={this.onValid}
                    onChange={this.onChange}
                    onInvalid={this.onInvalid}
                    onSubmit={this.onSubmit}
                >
                    {console.log(this.props)}
                    <WrappedComponent test={'test'} {...this.props} />
                </Formsy>
            )
        }
    }

}

export default WizardStep 

Мой компонент

import React, { Component } from 'react'
import WizardStep from '../../../HOC/WizardStep';

class TemplateSelector extends Component {

    render() {
        return (
        <input value={this.props.getValue()} onChange={(e) => this.props.setValue(e.target.value)}/>
                 )
    }
}

export default WizardStep(TemplateSelector)

Результаты в TypeError: _this.props.getValue is not a function

0 ответов

Другие вопросы по тегам