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

Posted 2023-03-05

【中文标题】如何在 React 中将用户输入限制为十六进制值？

【英文标题】：How to restrict user input to hexadecimal value in React?

【发布时间】：2020-07-06 22:41:46

【问题描述】：

这是我的输入：

这是它的定义：

<Input
  // type="number"
  id="numeroSerie"
  name="num_serie"
  defaultValue=this.state.num_serie
  onChange=this.onChange
  required
  pattern="[a-fA-F0-9]+"
  maxlength="1"
/>;

使用pattern="[a-fA-F0-9]+"意味着用户可以输入任何他想要的内容，然后当他点击表单提交按钮时将执行验证。 我想要的是：

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

这可以实现吗？

【问题讨论】：

type="text" 作品

你能创建一个在线小提琴来显示这个问题吗？

【参考方案1】：

为避免非法输入（the input value would not change）：

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

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

测试用例：十六进制：https://www.regextester.com/93640

const useState = React;

const App = () => 
  const [value, setValue] = useState("");
  const onChange = e => 
    const input = e.currentTarget.value;
    if (/^[0-9a-f]+$/.test(input) || input === "") 
      setValue(input);
    
  ;
  return (
    <div className="App">
      <input
        id="numeroSerie"
        name="num_serie"
        value=value
        onChange=onChange
      />
    </div>
  );

ReactDOM.render(<App />, document.getElementById("root"));

    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

【讨论】：

这可行，但它仍然存在问题，当用户输入非法字符时，它仍然会显示在输入字段中，而它不应该显示。

我的错，伙计。我在输入中使用 defaultValue 而不是 value。非常感谢它完美地工作

@AhmedGhrib 是的，既然你已经完全控制了组件，你就不需要defaultValue了

【参考方案2】：

此解决方案使用输入元素的onkeyup 事件来针对任意正则表达式测试内容。这意味着输入元素可能会暂时显示非法字符，但在正则表达式测试显示内容非法后，将恢复先前的内容。使用onkeyup 事件可以大大简化处理。

function setupField(field, re)

    field.autocomplete = "off";
    field.saveValue = field.value;
    field.onkeyup = function() 
        var v = field.value;
        if (v === '' || re.test(v)) 
            field.saveValue = v;
        
        else 
            field.value = field.saveValue;
        
    ;


setupField(document.getElementById('hex'), /^[A-Fa-f0-9]+$/);

<input type="text" id="hex" size="8">

【讨论】：

这也是可行的。但是，上面提到的 React 解决方案更加全面和有效。