0

有什么办法可以延迟组件的第一次验证，formsy-material-ui这样验证isNotEmpty就不会在第一次渲染表单时触发并弄乱用户体验？我正在使用受控组件，因此从每个渲染的状态设置值。

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

1 回答 1

0

我也需要这个解决方案。我一直在研究formy-material-ui的源代码，似乎文本字段在安装之前就设置了它的值。这就是为什么在渲染发生时该字段被标记为已更改（又名不是原始），因此会显示验证错误。

无论如何，我使用高阶组件编写了一个骇人听闻的解决方案。我一直在仅使用文本字段进行测试，但应该可以使用任何有此问题的字段。核心概念：如果formsy 字段没有“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>
);
于 2017-05-05T11:46:45.350 回答