如何在PinInput组件上修改触发问题上的脉轮ui

Question

PinInput组件的onChange事件与Chakra UI中的值不起作用，因此即使是很难触发的值也不会改变，这会导致焦点自动移动到下一个输入。

例如：当我尝试在onChange事件中将manageFocus属性的状态设置为false时，我希望在字段未填充时不会自动将焦点移动到下一个输入，但即使字段未填充，它也会自动将焦点移到下一输入一次。

在该示例中，尝试在Pin input字段中键入无效输入(您可以写6，它会将manageFocus属性设置为false(，您会看到在Pin输入将焦点移动到下一个输入一次后，manageFocus状态将设置为false。

那么，有没有办法在焦点更改之前配置onChange事件或设置manageFocus属性。

注意：if语句只允许正则表达式中1到5之间的唯一数字。

"(？：([1-5]((？！.\1(($">

您可以看到下面的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
HStack,
PinInput,
PinInputField,
ChakraProvider
} from "@chakra-ui/react";
function App() {
const [value, setValue] = useState("");
const [canMoveNext, setCanMoveNext] = useState(true);
const regex = new RegExp("^(?:([1-5])(?!.*\1))*$");
const handleChange = (e) => {
if (!regex.test(e)) {
setCanMoveNext(false);
return;
}
setCanMoveNext(true);
setValue(e);
};
return (
<ChakraProvider>
<HStack>
<PinInput
type="number"
manageFocus={canMoveNext}
value={value}
onChange={handleChange}
>
<PinInputField />
<PinInputField />
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</HStack>
</ChakraProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您还可以在以下位置看到直播：codesandbox

Answer 1

由于react不是最新的，所以codesandbox没有初始运行，因此请编辑package.json。此处

我玩了你的代码沙箱，阅读了PinInputComponent的文档，下面是我的2美分：

manageFocus对其先前的值进行处理。这就是我所说的上一个值的意思：
假设最初manageFocus是false，即使您根据正则表达式输入了一个有效的数字，它也不会移动到下一个，但如果您根据下一个正则表达式输入另一个有效数字，它会移到下一输入。反之亦然。

所以，如果我们以某种方式处理这种情况，我想我们可以想出一个解决方案。