Question

通过formik中的YUP验证Draft-JS EditorState的验证

2018-09-03

2671

draftjs formik yup

我正在使用 Draft-js with Formik 和 yup 来验证 Draft 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
  }),
})

但是，我收到了错误：

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.esm.js:491) at formik.esm.js:174

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

其他信息：

在 validationSchema 中，我得到了以下内容：

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

Answer 1

这对我而言适用于版本 0.10.5：

value._editorState.getCurrentContent().hasText()

Nick Day

2018-10-05

Answer 2

对于 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.'),

另外我还得做一些其他的技巧来触发 Yum 的触摸对象和字段集。

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