Formsy-material-ui не проверяет начальный рендер

Question

Есть ли способ, можно отложить первую проверку компонентов в formsy-material-ui так что проверки как isNotEmpty не запустить первый рендер формы и испортить UX? Я использую контролируемые компоненты, поэтому устанавливаю значение из состояния для каждого рендера.

<FormsyText
    name="name"
    value={this.state.name}
    floatingLabelText="Name"
    onChange={partial(this._changeInputValue, ['name'])}
    validations={{ isNotEmpty }}
    validationError="Field shoud not be empty"
/>

Answer 1

Мне тоже нужно было это решение. Я искал исходный код formsy-material-ui, и кажется, что текстовое поле устанавливает свое значение непосредственно перед монтированием. Вот почему поле помечается как измененное (то есть не первичное), когда происходит рендеринг, поэтому отображается ошибка проверки.

В любом случае, я написал хакерское решение с использованием компонента более высокого порядка. Я тестировал только с текстовыми полями, но должен работать с любыми полями, имеющими эту проблему. Основная концепция: если поле формы не имеет пропуском "validationErrors", оно не показывает никаких ошибок.

import React, { Component, PropTypes } from 'react';

export const preventFirstValidation = (FormsyField) => {
  return class extends Component {
    static propTypes = { preventFirstValidation: PropTypes.bool };
    static defaultProps = { preventFirstValidation: true };

    constructor(props) {
      super(props);
      this.state = { isChanged: false };
    }

    render() {
      const { preventFirstValidation, ...fieldProps } = this.props;
      return (
        <FormsyField
          {...fieldProps}
          onChange={(evt, val) => {
            if (!this.state.isChanged) this.setState({ isChanged: true });
            if (this.props.onChange) this.props.onChange(evt, val);
          }}
          validationErrors={(this.state.isChanged || !preventFirstValidation) ? this.props.validationErrors : undefined}
        />
      );
    }
  };
};

Как это использовать:

import { Form } from 'formsy-react';
import FormsyTextField from 'formsy-material-ui/lib/FormsyText';

const TextField = preventFirstValidation(FormsyTextField);

const MyForm = () => (
  <Form>
    {/* You're using the transformed field, exactly like before */}
    <TextField
      name = "some_field"
      validationErrors={{ isRequired: 'This is really required!' }}
      required
      preventFirstValidation={ /* you can enable or disable this feature */ }
    />
  </Form>
);