在Formik中通过yup验证草稿js EditorState

时间:2018-09-03 01:55:52

标签: draftjs formik yup

我将Draft-js with Formik一起使用,以验证草稿EditorState组件。

我认为我可以使用以下yup测试来检查EditorState是否为空:

//Each note has a string title and a body, which is a Draft EditorState
const validationSchema = yup.object().shape({
  title: yup.string(),
  body: yup.object()
    .test("has text", "Cannot save an empty note", (value) => {
      return value.getCurrentContent().hasText();  //boolean
  }),
})

但是,我得到了错误:

  

未捕获(承诺)TypeError:无法读取formik.esm.js:174处yupToFormErrors(formik.esm.js:491)处未定义的属性“长度”

这是 formik 的错误,还是我错误地使用了 yup

其他信息:

在validateSchema内部,我得到以下信息:

console.log(value.getCurrentContent().hasText())  //returns undefined
console.log(value.getCurrentContent())  //returns undefined

但是在EditorState(“ body”字段)的onChange处理程序中,它可以正常运行:

console.log(value.getCurrentContent().hasText())  //returns true or false

2 个答案:

答案 0 :(得分:0)

这对我来说适用于0.10.5版本:

value._editorState.getCurrentContent().hasText()

答案 1 :(得分:0)

这对我来说适用于 Formik#1.5.7 yum#0.27.0

Yup.object()
    .test(
        'has text',
        'Cannot save an empty note',
         value => value && value.blocks && value.blocks[0].text.length
    ).required('This field is required.'),

我还必须做一些其他的技巧来触发百胜的触摸对象和字段集。

onChange={(field, value) => {
    setFieldValue(field, value)
}}
onFocus={(field) => {
    setFieldTouched(field)
}}