我有一个React Redux表单,其中包含一些必填字段,并且其初始值使用initialValues属性设置
这些值可以很好地初始化,但是当我尝试保存表单时会出错,提示必须填写该字段(即使其中有一个值)。如果我只是单击该字段,然后再次保存,一切都会正常!
我已经尝试过使用初始化/重置/销毁/更改/模糊/等方法找到的所有方法,可以手动触摸或将所有字段设置为无用
reduxForm({
form: 'formName',
touchOnChange: true,
touchOnBlur: true
}),
useEffect(() => {
if (initialValues && initialValues.field) {
change(field, value)
blur(field, value)
}
}, [initialValues])
以及上述各种选项
如果我尝试重置并重新初始化表单或调用更改,则行为相同。如果我只是单击该字段,那么验证将按预期进行。
也尝试了enableReinitialize: true
,但这也没有改变行为
initialValues
是通过异步调用设置的,该调用会更新redux状态var,我想这是当前的问题。我一直无法使用任何mvp沙箱示例进行复制。
在字段中设置值就很好了,但是就像在设置initialValue之后,验证器只是不检查字段,除非用户在其中单击鼠标。
我怎么能告诉表单在其中已经有一个值,只需检查,而无需用户手动单击字段
-一些新信息
如果我手动触摸然后模糊该字段...验证会立即失败,而不是等待提交被按下,因此它确实必须认为输入内容没有任何值,直到单击鼠标为止
答案 0 :(得分:0)
您似乎需要表单验证。以下是https://redux-form.com/6.0.1/examples/submitvalidation/中的表单/表单验证示例。
import { SubmissionError } from 'redux-form'
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
function submit(values) {
return sleep(1000) // simulate server latency
.then(() => {
if (![ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
throw new SubmissionError({ username: 'User does not exist', _error: 'Login failed!' })
} else if (values.password !== 'redux-form') {
throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' })
} else {
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
}
})
}
export default submit
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import submit from './submit'
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type}/>
{touched && error && <span>{error}</span>}
</div>
</div>
)
const SubmitValidationForm = (props) => {
const { error, handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit(submit)}>
<Field name="username" type="text" component={renderField} label="Username"/>
<Field name="password" type="password" component={renderField} label="Password"/>
{error && <strong>{error}</strong>}
<div>
<button type="submit" disabled={submitting}>Log In</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
export default reduxForm({
form: 'submitValidation' // a unique identifier for this form
})(SubmitValidationForm)
祝你好运!