React中OTP输入字段的第一个输入自动聚焦

Question

我在React中做了OTP输入，你可以看到这个图像。一行是一个输入，我有6个输入。输入工作，这不是问题。我需要当组件打开时，第一个输入必须是自动对焦。当我使用<input autofocus/>时，最后一个输入是自动对焦，我需要第一个输入。

父组件

const [code, setcode] = useState(new Array(6).fill(""));

OTP组件

<div className="digit-inputs">
{props.code.map((data, index) => {
return (
<input
disabled={props.second <= 0 ? true : false}
type="text"
className="otp-field"
name="otp"
maxLength={1}
key={index}
style={data ? { borderBottom: "3px solid #7dbf2a" } : { borderBottom: "3px solid grey" }}
value={data}
onChange={(e) => handleChange(e.target, index)}
onFocus={(e) => e.target.select}
/>
);
})}
</div>

函数

const handleChange = (element, index) => {
if (isNaN(element.value)) return false;
props.setcode([...props.code.map((d, indx) => (indx === index ? element.value : d))]);
//Focus next input
if (element.nextSibling) {
element.nextSibling.focus();
}
};

Answer 1

如果您只想要组件挂载时的焦点，您可以使用数组的索引。只要加上autoFocus={index === 0}。

<input
type="text"
className="otp-field"
name="otp"
maxLength={1}
key={index}
style={
data
? { borderBottom: "3px solid #7dbf2a" }
: { borderBottom: "3px solid grey" }
}
//value={data}
onFocus={(e) => e.target.select}
autoFocus={index === 0} // add this line
//onChange
/>