Создание собственного 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