如何通过 material ui 将数字粘贴到单独的文本字段中？

Question

我在我的 React 项目中使用 material-ui。我想复制一个数字并粘贴到多个文本字段中。

const [otpArr, setOtpArr] = useState<string[]>(['', '', '', '', '', ''])
let inputRefs = useRef([React.createRef<HTMLDivElement>(), React.createRef<HTMLDivElement>(), React.createRef<HTMLDivElement>(), React.createRef<HTMLDivElement>(), React.createRef<HTMLDivElement>(), React.createRef<HTMLDivElement>()])
    
              {otpArr && otpArr.map((x, index) => (
                <NumberTextField
                  inputRef={inputRefs.current[index]}
                  variant='outlined'
                  size='small'
                  id='otp'
                  value={x}
                  key={index}
                  onChange={(e: any) => {
                    const temp = [...otpArr]
                    temp[index] = e.target.value
                    setOtpArr(temp)
                    if ((index < otpArr.length - 1) && e.target.value.length === 1) {
                      inputRefs.current[index + 1]?.current?.focus()
                    }
                  }}
                  inputProps={{ maxLength: 1 }}
                  style={{
                    width: '3rem',
                    direction: 'ltr',
                    marginTop: '3rem',
                  }}
                />
              ))}

有什么解决办法吗？

Answer 1

这是一个工作示例： https://codesandbox.io/s/simple-6-digite-input-past-2qqdg

您可以读取 paste 事件并使用事件侦听器获取 6 位数字：

 // listen "paste" event in useEffect
  useEffect(() => {
    const onPaste = (e) => {
      let paste = (e.clipboardData || window.clipboardData).getData("text");
      paste = paste.toUpperCase().split("");

      if (paste.length === 6) {
        setValue(paste);
      }
    };

    document.addEventListener("paste", onPaste);
    return () => {
      document.removeEventListener("paste", onPaste);
    };
  }, [value]);

PS: 您可以在输入元素上添加事件

如何通过 material ui 将数字粘贴到单独的文本字段中？

How to paste number in separate text fields by material ui?

textfield

reactjs

material-ui