reactjs - 如何检索表单中提交的错误值?
问题描述
我正在使用 React 和 redux-form 创建一个表单。后面我使用 Symfony 4.2 来验证数据。
当我提交表单时,如果出现错误,我不知道如何检索数据以再次将它们分配到输入中。目前,我的表单已重置,但该字段下有错误消息。
验证后是否可以检索字段值?
我的表格示例:
<Field component={this.renderField} name="email" type="text" placeholder="ADRESSE EMAIL" />
渲染方法:
renderField(data) {
const hasError = data.meta.touched && !!data.meta.error;
if (hasError) {
data.input['aria-describedby'] = `user_${data.input.name}_helpBlock`;
data.input['aria-invalid'] = true;
}
return <div className={`form-group${hasError ? ' has-error' : ''}`}>
<label htmlFor={`user_${data.input.name}`} className="control-label">{data.input.label}</label>
<input {...data.input} type={data.type} step={data.step} required={data.required} placeholder={data.placeholder} id={`user_${data.input.name}`}
className={hasError ? "form-control is-invalid" : "form-control"}/>
{hasError && <span className="invalid-feedback" id={`user_${data.input.name}_helpBlock`}>{data.meta.error}</span>}
</div>;
}
谢谢你的帮助
解决方案
推荐阅读
- python - 如何使用 Python 求解一个具有 2 个未知数的线性代数方程
- php - 关联数组中缺少值,但使用 var_dump() 可以看到值
- c# - 异步使用 Console.SetCursorPosition
- jquery - 将 insertAfter() 与 'this' 一起使用
- linux - 带和不带 -p 标志的 Nmap,端口是如何选择的?
- microsoft-graph-api - 即使页面为空,Microsoft Graph API calendarView delta 查询有时也会返回 nextLink
- python - 有没有一种优雅的方式使用 loc 来减少带有任意“OR”语句的数据帧?
- php - Laravel:我无法访问嵌套 json 中的对象属性
- scala - DataFrame 使用 scala 在火花中轻而易举 DenseMatrix
- typescript - Vue Typescript Flatpickr this.$refs.field 不可分配给“字符串”类型的参数