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

Question

这是我的输入：

这是它的定义：

<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]+"表示用户可以输入他想要的任何内容，然后在单击表单提交按钮时将执行验证。我想要的是：

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

这可能实现吗？

Answer 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>

Answer 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">