brafteditor防抖_Braft Editor在Ant Design表单中使用踩坑记录

在实际项目中，在 Ant Design 表单中使用Braft Editor，在form表单中对Braft Editor 进行自定义校验，

在Braft Editor 官方给出的案例中，表单的自定义校验方法 validator 的参数 value 是一个 editorState对象，因此是通过 value.isEmpty() (PS：isEmpty() 是Braft Editor 中 editorState对象的方法) 方法来判断 value 是否为空值。

{getFieldDecorator('content', {

validateTrigger: 'onBlur',

rules: [{

required: true,

validator: (_, value, callback) => {

if (value.isEmpty()) {

callback('请输入正文内容')

} else {

callback()

}

}

}],

})(

className="my-editor"

controls={controls}

placeholder="请输入正文内容"

/>

)}

复制代码

而在实际项目中，对editorState进行了转换，表单的自定义校验方法 validator 的参数 value 此时是 editorState 转换后的HTML字符，因为是自定义校验部分的代码是直接拷贝的案例中的代码，忘记去掉 value.isEmpty() 这句代码，在 validator 校验方法里如果没有使用 try...catch，校验函数里面如果出现异常，会没有任何提示，就会导致点击提交按钮无反应的情况，在控制台也没有任何的报错信息。

错误代码示例：

validator: (_, value, callback) => {

const len = value.replace(/(

|)/g, '').trim().length

if (!len || value.isEmpty()) {

callback('请输入正文内容')

} else {

callback()

}

}

复制代码

以上代码 validator 方法中的 value 是字符串，没有 isEmpty() 方法，导致代码异常，导致了点击提交按钮无反应的情况。

为了确保在validator 校验方法里即使有代码异常也能正常执行 validator 方法，应该在方法里加上 try...catch，如果代码有异常，在catch里把错误 callback 出去。

{

required: true,

validator: (_: any, value: any, callback: any) => {

const len = value.replace(/(

|)/g, '').trim().length;

// 使用 try...catch 确保 validator 方法能正常执行

try {

if (!len) {

callback('请输入正文内容');

} else {

callback();

}

} catch (error) {

// 把 异常 callback 出去

callback(error);

}

callback();

}

}

复制代码

拓展：