反应销输入与反应简单的键盘不工作

Question

我正在尝试是否有任何方法为Ipad视图提供内置的数字键盘。

输入似乎不接受输入字段值。

我试图为输入字段添加一个不同的类，以便可以手动添加值。但是，即使手动添加值似乎也不起作用。长度工作良好，但不知何故，Pin输入并不是手动获取值。

 if (input.length == 1) {
  document.querySelector(".input-1").value = input;
}
if (input.length == 2) {
  document.querySelector(".input-2").value = input;
}
if (input.length == 3) {
  document.querySelector(".input-3").value = input;
}
if (input.length == 4) {
  document.querySelector(".input-4").value = input;
}

我的问题是如何添加值和属性，以响应键按下的输入，这是一个虚拟键盘。

在component类之外添加了手动ID，但值仍然无法在键盘上进行键入。

https://codesandbox.io/s/react-pin-input-forked-3mo8xm

Answer 1

反应针输入的主要问题是，如果它不是来自物理键盘或OS键盘，它就不会取值。在这里看看这个例子。将值赋值给输入字段的一种简单方法是将值赋给

this.state.xyz

xyz将拥有从屏幕键盘上点击的任何内容。如下面的例子所示。这是使用反应简单键盘

https://codesandbox.io/embed/github/simple-keyboard/react-simple-keyboard-input-mask-demo/tree/master/?fontsize=14&hidenavigation=1&theme=dark

但是反应针输入允许我们通过检查传递给它的长度的值来创建多个输入字段。它们有其他属性，但没有values属性。这使得很难将值插入到反应针输入生成的输入字段中。

当我提出一个问题时，我正在通过querySelector选择输入字段，这就产生了一个问题。React输入生成的input字段没有不同的类或id。因此，我还在输入字段中添加了类来读取它的value。例如：

const firstLi = document.querySelector(
".pincode-input-container input:nth-of-type(1)"
);
firstLi.setAttribute("id", "input-1");

document.querySelector("#input-1").value = input;

即使是现在，我也没有得到答案，但找到了一个更好的方法来做。不过，我正在手动向输入字段添加值，它比querySelector方法工作得更好，但是如果输入不匹配，我仍然使用window.location.reload();清除引脚。请查看下面的示例。有两个输入场，一个是由React输入产生的，另一个是正常输入。

this.pin.elements[0].state.value = button;

https://codesandbox.io/s/hardcore-rgb-qnm081?file=/src/Pin.js:1517-1559

如果有人有比这更好的方法，请告诉我们。为未来将制造一个github回购包括两个组成部分。

Answer 2

纸屑是上面的数字，并防止用户点击它。

此外，提交处理程序没有绑定。

因此，我在纸屑加上绑定处理程序上添加了pointerEvents: "none"。

现在对你有用了吗？

https://codesandbox.io/s/react-pin-input-forked-in7qtw?file=/src/App.js