Отображение сообщений об ошибках onChange в redux-форме

Я пытаюсь использовать поле redux-form (вместе с Material-ui) и проверку. Похоже, что сообщения об ошибках отображаются, когда я ухожу от поля (например, onBlur). Чего я хотел бы достичь, так это выполнять проверку на лету по мере ввода пользователем и отображать сообщения об ошибках в событии onChange. Как мне добиться такого поведения?

import { TextField } from 'redux-form-material-ui';
import { Field, reduxForm } from 'redux-form';

const MyForm = (props) => (
  <form>
      <div className="form-group">
        <Field
          name="foo"
          type="text"
          hintText="Foo"
          component={TextField}
        />
  </form>
);

export default reduxForm({
  form: 'MyForm',  
  validate             
})(MyForm);

reactjs material-ui redux-form
person foobar    schedule 28.03.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы пробовали использовать этот пример в CodeSandbox? Как и предложил Деннис, вы могли бы назвать «прикосновение», хотя, в зависимости от ваших потребностей, вы можете сделать это onChange:

  <Field
    name="username"
    type="text"
    component={renderField}
    label="Username"
    onChange={() => touch('username')}
  />
person ovation22    schedule 29.08.2017

arrow_upward
4
arrow_downward

Поведение проверки по умолчанию таково, что сообщения отображаются только при касании полей (например, onBlur).

Я полагаю, вы могли бы обойти это, используя метод касания в componentWillMount, чтобы он затрагивался при монтировании:

componentWillMount() {
  const { touch } = this.props;
  touch('foo');
}

Однако у этого есть недостаток, заключающийся в том, что любые ошибки могут отображаться непосредственно при загрузке формы, но в этом случае проверка сразу же запускается в onChange.

person Dennis    schedule 04.04.2017
comment
Спасибо за предложение, это действительно мог быть вариант. В итоге я просто получил доступ к состоянию через formValueSelector в redux-form, проверил на лету и напрямую установил errorText поля. Кажется, я добился того, что хочу. - person foobar; 05.04.2017