Javascript 如何在React中将用户输入限制为十六进制值？

这是我的输入：

这是它的定义：

；

使用

pattern=“[a-fA-F0-9]+”

意味着用户可以输入他想要的任何内容，然后在单击表单提交按钮时执行验证。
我想要的是：

当用户单击非十六进制的任何字母或数字时，输入值不会更改。就像输入类型为数字时，用户尝试输入文本一样

这有可能实现吗

为避免非法输入（

输入值不会更改

）：

在处理函数中添加正则表达式条件就可以了

/^[0-9a-f]+$/.test(yourValue) // hexadecimal

• 测试用例：十六进制：

const{useState}=React；
常量应用=（）=>{
const[value，setValue]=useState（“”）；
const onChange=e=>{
常量输入=e.currentTarget.value；
如果（/^[0-9a-f]+$/.test（输入）| |输入==“”）{
设定值（输入）；
}
};
返回(
);
}
render（，document.getElementById（“根”））
此解决方案使用输入元素的
onkeyup
事件根据任意正则表达式测试内容。这意味着输入元素可能会暂时显示非法字符，但在正则表达式测试显示内容非法后，先前的内容将被恢复。使用
onkeyup
事件可大大简化处理过程


功能设置字段（字段，re）
{
field.autocomplete=“关闭”；
field.saveValue=field.value；
field.onkeyup=函数（）{
var v=字段值；
如果（v==''| |重新测试（v））{
field.saveValue=v；
}
否则{
field.value=field.saveValue；
}
};
}
setupField（document.getElementById（'hex'），/^[A-Fa-f0-9]+$/）
type=“text”工作您可以创建一个在线小提琴来显示问题吗？这也是可行的。但是，上面提到的React解决方案更全面、更有效。这是可行的，但它仍然存在一个问题，当用户输入非法字符时，它仍然会显示在输入字段上，而不应该显示。我的错，伙计。我在输入中使用的是defaultValue而不是value。非常感谢，它很有效perfectly@AhmedGhrib是的，因为您已经完全控制了组件，所以不再需要
defaultValue