我有带有输入的 Ant 设计表单,我需要限制输入中写入的某些字符。
<Form.Item
{...formItemLayout}
label={this.props.intl.formatMessage({ id: 'customer.form.zipCode' })}
>
{getFieldDecorator('zip_code', {
validateTrigger: 'onBlur',
initialValue: this.props.addressFormDefaults ? this.props.addressFormDefaults.zip_code : '',
rules: [
{
transform: (value) => typeof value === 'string' ? value.trim() : undefined,
required: true, message: this.props.intl.formatMessage({ id: 'validation.requiredField' }),
},
],
})(
<Input
type="number"
size="large"
className={this.props.useSmartForm ? `${this.props.smartFormClassInstance} ${SMARTFORM_CLASS.ZIP}` : undefined}
form={this.props.formId}
disabled={this.props.formDisabled}
/>,
)}
</Form.Item>
所以理想的解决方案是添加一些按键事件并像这样验证它
<Input
type="number"
onKeyDown={(event) => {
// some validation;
if (someValidation()) {
return true;
}
return false;
}}
/>;
但从 ts 定义来看
onKeyPress?: KeyboardEventHandler<T>;
type React.KeyboardEventHandler<T = Element> = (event: KeyboardEvent<T>) => void
其无效函数。当我尝试返回 false 时,它不会受到限制。 ant 设计在某种程度上是迟缓的,并且不会从此回调返回值。 甚至不应该允许用户编写它。
我也不使用任何状态,仅使用事件的初始值。
是否有解决方案如何添加经典的 onKeyPress、onKeyDown 等输入事件,而不是 ant design 事件?
谢谢
最佳答案
前几天我在 Antd 输入上实现了类似的东西,并使用了另一个答案中的一般功能。这按预期工作,只需为您想要允许的任何字符编写一个正则表达式,使用 React.KeyboardEvent
作为参数:
const onKeyPress = (e: React.KeyboardEvent) => {
const specialCharRegex = new RegExp("[a-zA-Z0-9@.' ,-]");
const pressedKey = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (!specialCharRegex.test(pressedKey)) {
e.preventDefault();
return false;
}
}
更新:您使用的 AntD 版本是什么?您在哪里看到该定义?我使用的是 3.23.1,InputProps
接口(interface)没有明确定义 onKeyPress
。但是,输入组件将所有其他属性转发到它在 return 语句中呈现的基本 HTML 输入,因此不应存在任何类型冲突。
通常,事件处理程序不会返回显式值,而是通过default true返回显式值。 ,并且可以返回 false
来指示事件已被取消,如上面的函数所示。至于为什么返回类型为 void 的函数会允许返回 false,这是 TypeScript 故意制造的异常,this answer对此进行了深入解释。 .
关于javascript - ant design 中输入限制字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58026576/