使用Formsy创建自己的HOC

时间:2018-10-02 08:48:28

标签: javascript reactjs formsy-react

我正在尝试创建自己的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 个答案:

没有答案