Комментарии пользователя Никита Кит

Где двусторонний дата-биндинг?

Никита Кит @ShadowOfCasper Автор вопроса

Дмитрий, естественно.
Пример. Есть login, есть register, у обоих компонентов есть одна и та же функция биндинга. Она абсолютно идентична, но я не могу её вынести в хок потому что у него совсем другой стейт:

//Рега
class Register extends React.Component {
    constructor(props) {
        super(props)
        this.updateField = this.updateField.bind(this)
        this.state = {
            profileName: {
                valid: true,
                value: ''
            },
            email: {
                valid: true,
                value: ''
            },
            confPass: {
                valid: true,
                value: ''
            }
        }
    }
// явный биндинг
    updateField(fieldKey, e) {
        const value = e.target.value;
        this.setState((state) => {
            state[fieldKey].value = value;
            return Object.assign({}, state)
        })
    }
    render() {
        return <div className='auth__reg'>
            <div className='auth__card'>
                <Input className='auth__input'
                    labelInside
                    value={this.state.profileName.value}
                    label={
                        <Translation>
                            {t => t('auth.label.profile')}
                        </Translation>
                    }
                    onChange={this.updateField.bind(this, 'profileName')}/>
                <Input className='auth__input'
                    labelInside
                    value={this.state.email.value}
                    label={
                        <Translation>
                            {t => t('auth.label.email')}
                        </Translation>
                    }
                    onChange={this.updateField.bind(this, 'email')}/>
                <Input className='auth__input'
                    labelInside password
                    value={this.state.password.value}
                    label={
                        <Translation>
                            {t => t('auth.label.setPass')}
                        </Translation>
                    }
                    onChange={this.updateField.bind(this, 'password')}/>
                <Input className='auth__input'
                    labelInside password
                    value={this.state.confPass.value}
                    label={
                        <Translation>
                            {t => t('auth.label.confirmPass')}
                        </Translation>
                    }
                    onChange={this.updateField.bind(this, 'confPass')}/>
               
            </div>
        </div>
    }
}

//логин
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.updateField = this.updateField.bind(this)
        this.state = {
            remember: true,
            login: {
                value: ''
            }
        }
    }
// и вот она снова... 
    updateField(fieldKey, e) {
        const value = e.target.value;
        this.setState((state) => {
            state[fieldKey].value = value;
            return Object.assign({}, state)
        })
    }

    render() {
        return <div className='auth__login'>
            <div className='auth__card'>
                <Input className='auth__input'
                    labelInside
                    value={this.state.login.value}
                    label={
                        <Translation>
                            {t => t('auth.label.login')}
                        </Translation>
                    }
                    onChange={this.updateField.bind(this, 'login')}/>
            </div>
        </div>
    }
}

Лишние куски я выпилил

Войдите на сайт