N
N
Nikita Kit2019-09-24 18:41:57
React
Nikita Kit, 2019-09-24 18:41:57

Is it possible in HOC methods to work with the state of children instead of passing them through props?

This is my first time writing a high order component in React and I'm amazed at the nasty composition of this approach. Either the react developers stupidly fell into writing functionality similar to view mixins, and they left such a game, or I'm doing something wrong.
Given:
2 components: login, reg. Both have a password input that needs to be validated against multiple matches.
In short, a typical example that requires end-to-end functionality for checking validations, well, I would also like to throw a callback for updating form fields common to these components into this hook.
I read the doc. Article . another articleand did not understand how to throw the state of the wrapped component into the hawk's visibility zone? And is it possible to do this at all or return all this with a mess of props, from which riveting the states of daughters is the only way?
Hawk code:

import React from 'react';
export default function withPassValidator(Component) {
    return class extends React.Component {
        constructor(props) {
            super(props)
            this.updateField = this.updateField.bind(this)
            this.state = {
                password: {
                    valid: true,
                    value: '',
                    matches: {
                        length: {
                            min: 8,
                            max: 24,
                            valid: false
                        },
                        letters: {
                            regex: /[A-Za-z]/g,
                            valid: false
                        },
                        symbols: {
                            regex: /[[email protected]#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/g,
                            valid: false
                        },
                        numbers: {
                            regex: '/[0-9]/g',
                            valid: false
                        }
                    }
                }
            }
        }
        updateField(fieldKey, e) {
            const value = e.target.value;
            this.setState((state) => {
                // тут я ловлю state[fieldKey] - undefined. 
                state[fieldKey].value = value;
                return Object.assign({}, state)
            })
        }
        validatePass() {
            let {matches} = this.state.password;
            //...
        }
        render() {
           // подобное наследование из пропов выглядит ужасно неуниверсально
            return <Component passwordData={this.state.password}
                              updateField={this.updateField} {...this.props} />
        }
    }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question