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

Question

[Никита Кит]

Я задумался об этом, когда начал описывать хок - мой предыдущий вопрос к реактовцам.
Вообщем если проанализировать кодовую базу реакта - на каждое обновление интерактивного поля пользователем постоянно нужно писать руками колбэк ручного обновления стейта ("декларативный" реакт ага да - ну вы поняли). Колбэк работает со стейтом текущего компонента напрямую, то есть даже в хок повторение одного и того же колбэка, работающего с setState я вынести не могу.
Есть ли какие-то противоядия против этой заразы? Я порыл в гугле - нашёл страницу видимо очень древней доки
https://ru.reactjs.org/docs/two-way-binding-helper...
Описанная апишка даже близко не похожа на современный реакт и ничего другого я просто не нашёл

Comments

[Дмитрий]

даже в хок повторение одного и того же колбэка, работающего с setState я вынести не могу.

Можно пояснение?

[Никита Кит]

Дмитрий, естественно.
Пример. Есть 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>
    }
}

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

[Дмитрий]

Я может чего не догоняю, но почему не например

const updateField = (context, fieldName) => value => {
  context.setState({ [fieldName]: value })
}

а в JSX пишете

onChange={updateField(this, 'login')}

[Никита Кит]

Дмитрий, я попробую, но мне нужен функциональный сетстейт. Как видите по примеру, стейты компонентов имеют сложную структуру и если я отдам в setState объект вместо колбэка, я точно отгребу ошибок

[Дмитрий]

Никита Кит, Ну а какая принципиальная разница? Значит так

const updateField = (context, fieldName) => value => {
  context.setState(state => ({ ...state, [fieldName]: value }))
}

[Никита Кит]

Дмитрий, как я и думал это не заработало. У меня в updateField с onChange прилетал event - я ж не просто так его забиндил:
onChange={this.updateField.bind(this, 'email')}
Ивент то прилетает, только fieldKey я теперь пробросить не могу.
onChange={updateField(this, 'login')}
Уже как таковое неверно. Реакт исполнит updateField вместо биндинга

[Никита Кит]

Дмитрий, немного пораскинув мозгами я прокинул контекст явно и это заработало.
Теперь биндинг выглядит так:
onChange={updateField.bind(this, 'login', this)
А сама импортируемая функция так:

const updateField = (fieldKey, context, event) => {
    const value = event.target.value;
    context.setState((state) => {
        state[fieldKey].value = value;
        return Object.assign({}, state)
    })
}

[Дмитрий]

Пример рабочего кода
https://codepen.io/dimoff66/pen/JjPzPNM

[Дмитрий]

class Simple extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      firstName: 'John',
      lastName: 'Rembo'
    }
  }

  render () {
    return (<div>
      <input {...bindField(this, 'firstName')} />
      <input {...bindField(this, 'lastName')} />
    </div>)
  }
}

const bindField = (context, fieldName) => {
  return {
    value: context.state[fieldName],
    onChange: event => {
      const value = event.target.value
      context.setState(state => ({ ...state, [fieldName]: value }))
    }
  }
}

[Никита Кит]

Дмитрий, да, это определённо решение и не такое упоротый код получается. Не сказать что универсально, но хотя бы реально все биндинги вынести в утилиты.
Теперь я понимаю всю суть этого мемасика))))

[hzzzzl]

Никита Кит, да просто через JS прокинется событие в обработчик евента

<input name="firstName" onChange={this.handleChange} />
<input name="lastName" onChange={this.handleChange} />

....

handleChange = e => {
  this.setState({ [e.target.name]: e.target.value })
}

[hzzzzl]

state = {
  firstName: 'John',
  lastName: 'Rembo'
}

render() {
  return (
    </>
    {
      Object.entries(this.state).map(([key, value]) => (
        <input key={'input_' + key} name={key} value={value} onChange={this.handleChange} />
      ))
    }
    </>
  )
}

за скобки не уверен без автокомплита, но как-то так ;Д

[Сергей Сунцев]

Понимаю, что автор проблему хочет решить более нативным способом, но я вижу вариант, в использовании redux-form
Конечно, при условии, что у вас redux в проекте.

Для mobx тоже есть решение

[Никита Кит]

Сергей Сунцев, я против сторов как таковых и везде. Мне не нравится flux-подход. Я считаю что при грамотном распределении сквозной функциональности стор не нужен и он только всё усложняет

[Сергей Сунцев]

Это две стороны одной монеты. То что усложняет, это определённо да! Дольше писать компоненты. Много "лишнего" кода. Но и проще тоже становится, особенно на больших проектах и когда работаешь в команде.

[Никита Кит]

Дольше писать компоненты. Много "лишнего" кода. Но и проще тоже становится

Сергей Сунцев, вы сами себе противоречите. В большой команде и сложных проектах простота и читаемость кода превыше всего - а реакт крайне свободомысленный фрейм. Большие команды - я убедился на собственном опыте - всегда выбирают ангуляр. Ибо на каждый чих своя строго задекларированная салфетка, ещё и полная поддержка ts из коробки. А чем шаблоннее прогры больших проектов пишут код, тем легче искать им замену, подхватывать эстафету ну и так далее

[Сергей Сунцев]

Никита Кит, Нет противоречия. Главное придерживаться шаблону. Observer более чем рабочий шаблон мы большие проекты на нем сторили.