代码之家 › 专栏 › 技术社区 › CCCC

react-无法设置输入框的值

react-otp-input typescript reactjs javascript

CCCC · 技术社区 · 4 年前

我在我的应用程序中输入了2个otp。

在里面 Input.tsx ,我正在使用 react-otp-input 对于otp功能
如果

    <OtpInput
      value={"abcde"}
      ...
      numInputs={5}
    />

的用户界面 反应otp输入 将

现在的问题是,当我试图更改otp的值时,它会抛出错误

Cannot set properties of undefined (setting 'value')

我该怎么修?

输入.tsx

import React, { useState } from "react";
import OtpInput from "react-otp-input";

type InputPropType = {
  value: string;
  setValue: (event: string) => void;
};

function Input(props: InputPropType): JSX.Element {
  const { value, setValue } = props;
  return (
    <OtpInput
      value={value}
      onChange={(e: string) => {
        setValue(e);
      }}
      numInputs={5}
    />
  );
}

export default Input;

应用.tsx

import React, { useState } from "react";

import Input from "./Input";

export default function App() {
  type InputValueType = {
    id: number;
    value: string;
  };
  const [inputValues, setInputValues] = useState<Array<InputValueType>>([
    { id: 0, value: "" },
    { id: 1, value: "" }
  ]);

  const InputGroup = () => {
    let numOfInputs: number = 2;
    var rows: Array<any> = [];
    for (var i = 0; i < numOfInputs; i++) {
      let inputValue: InputValueType = inputValues[i];
      rows.push(
        <Input
          key={inputValue.id}
          value={inputValue.value}
          setValue={(event: string) => {
            let inputValuesTemp = inputValues;
            inputValuesTemp[i]["value"] = event;
            setInputValues(inputValuesTemp);
          }}
        />
      );
    }
    return <>{rows}</>;
  };

  return (
    <div className="App">
      <InputGroup />
    </div>
  );
}

Codesandbox
https://codesandbox.io/s/react-typescript-forked-s38ck9?file=/src/App.tsx:0-918

1 回复 | 直到 4 年前

Amila Senadheera 4 年前

需要纠正的事情很少,

由于使用了 var 而不是 let .所有 i 变量在for循环中引用相同的for循环闭包,这意味着 我 是 2 在迭代结束时。所有 inputValuesTemp[i] 现在决心 inputValuesTemp[2] 这绝对是 undefined 。

代替 var 具有 允许 为循环的每次迭代创建闭包。

for (let i = 0; i < numOfInputs; i++) {...}

而且,您还需要获得react的值数组的副本,以执行重新应答(通知数组已更改)。

let inputValuesTemp = [...inputValues];

你的 InputGroup 组件在 App 组件,导致您每次按键都失去焦点。要解决焦点问题,请移动 InputGroup 中的 应用程序 并将其作为单独的组件保存。

import React, { useState } from "react";

import Input from "./Input";

type InputValueType = {
  id: number;
  value: string;
};

const InputGroup = () => {
  const [inputValues, setInputValues] = useState<Array<InputValueType>>([
    { id: 0, value: "" },
    { id: 1, value: "" }
  ]);

  let numOfInputs: number = 2;
  var rows: Array<any> = [];
  for (let i = 0; i < numOfInputs; i++) {
    let inputValue: InputValueType = inputValues[i];
    rows.push(
      <Input
        key={inputValue.id}
        value={inputValue.value}
        setValue={(event: string) => {
          let inputValuesTemp = [...inputValues];
          inputValuesTemp[i]["value"] = event;
          setInputValues(inputValuesTemp);
        }}
      />
    );
  }
  return <>{rows}</>;
};

export default function App() {
  return (
    <div className="App">
      <InputGroup />
    </div>
  );
}