Formsy-material-ui不验证初始渲染
Formsy-material-ui不验证初始渲染
提问于 2017-03-25 07:38:39
有没有什么办法可以延迟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"
/>回答 1
Stack Overflow用户
发布于 2017-05-05 19:46:45
我也需要这个解决方案。我一直在研究formsy-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>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43010818
复制相关文章
相似问题
腾讯云开发者
