react-jsonschema-forms - 在 React-JsonSchema-Form 中从表单字段的开头和结尾修剪空格

Question

我正在使用 react-jsonschema-form 1.2.1 来构建基于 JsonSchema (v7) 的表单。当用户在表单上按下提交时，我想自动修剪某些文本框输入字段的前导和尾随空格。由于表单完全由<Form>react-jsonschema-form 模块的元素呈现，我不知道如何使用 JavaScript 代码做到这一点。

react-jsonschema-form 有修剪功能吗？

提前致谢！

Answer 1

有几种不同的方法可以做到这一点，但没有一种像标记那样简单来修剪所有字符串数据。

1. 您可以定义自定义小部件并使用 uiSchema 指定特定字段以使用此小部件。然后，此小部件可以在使用原生 onChange 函数通知表单其值已更改之前修剪值，请参阅：https ://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/#custom -widget 组件

2. 你可以定义自己的TextWidget（保留名，参考：https ://github.com/mozilla-services/react-jsonschema-form/blob/master/src/components/widgets/TextWidget.js => https:// github.com/mozilla-services/react-jsonschema-form/blob/master/src/components/widgets/BaseInput.js），然后使用这个 TextWidget 替换所有字符串类型的字段：

const myWidgetOverrides = { TextWidget };

render() {
    return (
        <Form schema={schema}
            widgets={this.myWidgetOverrides}
        />
    );
}

3. 您可以在扩展 React JSONSchema Form 类的新类组件中覆盖 validate 函数：

class TrimmedStringForm extends Form {
    validate(formData, schema) {
        formData = trimAllStrings(formData);
        return super.validate(formData, schema);
    }
}

或定义您自己的验证函数（请参阅： https : //react-jsonschema-form.readthedocs.io/en/latest/validation/#custom-validation ）以在传递之前从 formData 修剪所有/特定字符串类型字段进入提交功能。