Реагировать на новые формы, устанавливать входное значение и поле фокуса

Question

Так что я хочу сделать, это сбросить значение поля имени пользователя в '' и сфокусировать его (когда я получаю сообщение об ошибке, отправленное обратно с сервера).

// get the form ref
var form = this.refs.loginForm.getForm();
// reset username field value (this actually gets updated if i check 
// it in the console but the UI won't re-render
form.updateData({username: ''}, {validate: false})
// focus the username input (ofc doesnt work at all)
form.fields.username.focus();

Answer 1

Фокусирующая часть зависит от того, как вы визуализируете форму, поскольку для этого вам необходим доступ к реальному DOM-узлу. Если вы делаете это вручную, вы можете передать ref при рендеринге этого поля:

form.boundField('username').render({attrs: {ref: 'username'}})

Тогда позже вы можете сделать React.findDOMNode(this.refs.username).focus() когда нужно сфокусировать поле.

Если другой компонент React отображает форму для вас, например, <RenderForm>, в настоящее время нет способа добраться до фактического узла DOM, который он заканчивает рендерингом для каждого входа. Есть открытая проблема для этого.

---

Код обновления данных должен работать, так как form.updateData() должен принудительно обновлять компонент, содержащий форму. Можете ли вы привести рабочий пример?

Answer 2

Имеет ли что-нибудь из этого отношение к React? В основном, при загрузке страницы проверьте наличие ошибки, если это значение присутствует, чем вы хотите передать это значение как свой компонент вашему реагирующему компоненту, чтобы соответственно построить свой пользовательский интерфейс.

Извините, вопрос довольно расплывчатый, есть множество способов справиться с этим. Не особо реагируете конкретно, так как вы сказали, что он возвращается с сервера, я предполагаю, что страница перезагрузится? или вы делаете ajax-вызов, который возвращается на сервер, если это так, зарегистрируйте ответ как переменную в состоянии React и скажите, что делать, если эта переменная присутствует.