Сразу извиняюсь за огромный код, выкладываю его для полноты картины. Взял пример на Preact, который корректно исполнялся, хотел перевести его на React, но вышло, кажется, не совсем удачно. Когда пользователь вводит пароль/email, вызывается callback validData(), в нем обрабатывается ввод, к примеру, если пароль и его подтверждение не совпадают, уведомить пользователя. Но вместо сравнения паролей "В реальном времени" они проверяется только после ввода еще одного символа (и, соответственно, еще одного вызова коллбэка). Для примера, если я введу в поля паролей 12345 и 12345, то они не будут совпадать, но если я добавлю еще символ (12345 123456), то они якобы совпадут. Очевидно, React вместо сравнения в реальном времени проверяет прошлое состояние, как это исправить? Это моя первая попытка в React и я совершенно в нем не разбираюсь :(
const { createElement } = React;
//Рендер
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
registration: 0,
password: '',
repeatedPassword: '',
feedback: 'Добро пожаловать!',
valid: false,
isWaiting: false
};
this.wrapper = React.createRef();
this.email = React.createRef();
}
componentDidMount() {
if ('alt' in window) {
alt.on('error', errorName => {
this.updateFeedback(errorName);
this.setState({ isWaiting: false })
});
alt.on('success', successMessage => {
this.updateFeedback(successMessage);
});
alt.on('setEmail', email => {
this.setState({ email }),
setTimeout(() => {
this.email.current.value = this.state.email;
}, 500);
});
alt.on('goToLogin', () => {
this.setState({ registration: false, isWaiting: false });
})
setTimeout(() => {
if ('alt' in window) {
alt.emit('ready');
}
this.email.current.focus();
}, 500);
}
}
updateFeedback(msg) {
this.setState({ feedback: msg })
}
validData(e) {
if (e.target.id === 'email') {
this.setState({ email: e.target.value });
}
if (e.target.id === 'password') {
this.setState({ password: e.target.value });
}
if (e.target.id === 'repeatedPassword') {
this.setState({ repeatedPassword: e.target.value });
}
if (!this.checkEmail(this.state.email)) {
this.setState({
feedback: 'Введите корректную почту.', valid: false });
return;
}
if (this.state.password.length <= 5 || this.state.password.length >= 16 ) {
this.setState({
feedback: 'Пароль должен быть от 5 до 16 символов!', valid: false});
return;
}
if (this.state.registration && this.state.password !== this.state.repeatedPassword) {
this.setState({
feedback: 'Пароли не совпадают.', valid: false });
return;
}
if (this.checkEmail(this.state.email)) {
this.setState({ valid: true });
} else {
this.setState({ valid: false });
}
this.setState({ feedback: 'Всё хорошо!' });
}
checkEmail(mail) {
var reg = /.+@.+\..+/i;
return reg.test(String(mail).toLowerCase());
}
submitData(){
this.setState({ isWaiting: true });
if ('alt' in window) {
if (this.state.registration) {
alt.emit('registerAccount', this.state.email, this.state.password)
} else {
alt.emit(
'existingAccount',
this.state.email,
this.state.password,
true
);
}
}
}
setRegistration(){
this.setState({ fadeOut: 1 });
setTimeout(() => {
this.setState({ registration: true, fadeOut: 0 })
}, 1000);
}
setLogin(){
this.setState({ fadeOut: 1 });
setTimeout(() => {
this.setState({ registration: false, fadeOut: 0 })
}, 1000);
}
render() {
return createElement(
'div',
{
id: 'app',
className: this.state.isWaiting
? 'none animated fadeOut'
: 'regular animated fadeIn'
},
createElement('div', { className: 'header' }, createElement('div', { className: 'logo' }, 'Logo')),
createElement(
'div',
{ className: 'animated flash container' },
createElement('p', { className: 'center', id: 'feedback' }, this.state.feedback)
),
createElement(
'div',
{
ref: this.wrapper,
className: this.state.fadeOut
? 'animated fadeOut innerwrapper'
: 'animated fadeIn innerwrapper'
},
this.state.registration
? createElement(
'div',
{ className: 'container' },
createElement(
'div',
{ className: 'right' },
createElement(
'button',
{ onClick: this.setLogin.bind(this) },
'Авторизация'
)
)
)
: createElement(
'div',
{ className: 'container' },
createElement(
'div',
{ className: 'right' },
createElement(
'button',
{ onClick: this.setRegistration.bind(this) },
'Новый аккаунт?'
)
)
),
//Email
createElement(
'div',
{ className: 'container' },
createElement(
'div',
{
className: 'content'
},
createElement('p', {}, 'Почта'),
createElement('input', {
type: 'text',
name: 'email',
placeholder: 'Почтовый адрес',
autoComplete: 'off',
onChange: this.validData.bind(this),
id: 'email',
ref: this.email,
className: this.checkEmail ? 'green' : 'red'
})
)
),
//Пароль
createElement(
'div',
{ className: 'container' },
createElement(
'div',
{
className: 'content'
},
createElement('p', {}, 'Пароль'),
createElement('input', {
type: 'password',
name: 'password',
placeholder: 'Пароль',
onChange: this.validData.bind(this),
id: 'password',
className:
(this.state.registration &&
(this.state.password.length >= 5 &&
this.state.password.length <= 16 &&
this.state.repeatedPassword.length >= 5 &&
this.state.repeatedPassword.length <= 16 &&
this.state.password === this.state.repeatedPassword)) ||
(!this.state.registration && this.state.password.length >= 5)
? 'green'
: 'red'
})
)
),
this.state.registration
? createElement(
'div',
{
className: 'container'
},
createElement(
'div',
{ className: 'content' },
createElement('p', {}, ''),
createElement('input', {
type: 'password',
name: 'password',
placeholder: 'Подтверждение пароля',
onChange: this.validData.bind(this),
id: 'repeatedPassword',
className:
(this.state.registration &&
(this.state.password.length >= 5 &&
this.state.password.length <= 16 &&
this.state.repeatedPassword.length >= 5 &&
this.state.repeatedPassword.length <= 16 &&
this.state.password === this.state.repeatedPassword)) ||
(!this.state.registration && this.state.password.length >= 5)
? 'green'
: 'red'
})
)
)
: createElement('div', { className: 'container' }),
createElement(
'div',
{
className: 'container'
},
createElement(
'div',
{ className: 'center' },
createElement(
'button',
{
onClick: this.submitData.bind(this),
disabled: !this.state.valid,
className: this.state.valid ? 'green' : 'red'
},
'Отправить'
)
)
)
)
);
}
}
ReactDOM.render(createElement(App), document.querySelector('#render'));