Question

我注意到在textarea字段中，同步错误处理的行为与input字段不同。例如，在表单的输入字段上显示同步错误后，当我开始在字段中键入时，错误会很快消失。在textarea字段上，当我开始输入时（或当我离开字段时），同步错误就在那里。

基本上，当我退出该字段时，onBlur未将touched设置为true。

在处理Redux表单中的textarea字段上的同步错误处理时，我应该考虑哪些额外的内容？

Answer 1

与v4和v5相比，

redux-form ^ 6.x.x改变了很多实现如果您发布示例代码，我可以帮助您更好。

我认为你的意思，正常的领域工作得很好但是领域

这意味着你的reduxForm（...）工作正常，你的错误处理函数或字段渲染函数可能存在问题。

我留下简单的代码示例

// validate
const validate = (values) => {
    const errors = {};
    if(!values.title) {
        errors.title = 'title require';
    }
    if (!values.categories) {
        errors.categories = 'categories require';
    }
    if (!values.content) {
        errors.content = 'content require';
    }
    return errors;
};

// renderField
const renderField = ({ input, label, type, textarea, meta: { touched, error, warning, invalid } }) => {
    const textareaType = <textarea {...input} placeholder={label}  type={type} className={`form-control ${touched && invalid ? 'has-danger' : ''}`}/>;
    const inputType = <input {...input} placeholder={label}  type={type} className={`form-control ${touched && invalid ? 'has-danger' : ''}`}/>;

    return (
        <div>
            <label>{label}</label>
            <div>
                {textarea ? textareaType : inputType}
                {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
            </div>
        </div>
    );
};

// React render
<form onSubmit={handleSubmit}>
    <Field name="title" component={renderField} type="text" label="Title" />
    <Field name="categories" component={renderField} type="text" label="Categories"  />
    <Field name="content"  component={renderField} type="text" label="Content" textarea={true} />
    <button type="submit" disabled={pristine || submitting} className="btn btn-primary">Submit</button>
</form>

reduxForm({
    form: 'TestComponent', // Name of the form
    validate                // <--- validation function given to redux-form
})(TestComponent)

Redux形式textarea错误处理

1 个答案: