admin管理员组文章数量:1023009
I made OTP input in React You can see this image. One line is one input and I have 6 inputs. The inputs work that is not a problem. I need when the ponent opens, the first input must be autofocus. When I use <input autofocus/> the last input is autofocus, I need the first input.
My parent ponent
const [code, setcode] = useState(new Array(6).fill(""));
OTP ponent
<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>
My function
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();
}
};
I made OTP input in React You can see this image. One line is one input and I have 6 inputs. The inputs work that is not a problem. I need when the ponent opens, the first input must be autofocus. When I use <input autofocus/> the last input is autofocus, I need the first input.
My parent ponent
const [code, setcode] = useState(new Array(6).fill(""));
OTP ponent
<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>
My function
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();
}
};
1 Answer
Reset to default 2If you just wanted the focus when the ponent mounts, you can use the index of the array. just add 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
/>
I made OTP input in React You can see this image. One line is one input and I have 6 inputs. The inputs work that is not a problem. I need when the ponent opens, the first input must be autofocus. When I use <input autofocus/> the last input is autofocus, I need the first input.
My parent ponent
const [code, setcode] = useState(new Array(6).fill(""));
OTP ponent
<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>
My function
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();
}
};
I made OTP input in React You can see this image. One line is one input and I have 6 inputs. The inputs work that is not a problem. I need when the ponent opens, the first input must be autofocus. When I use <input autofocus/> the last input is autofocus, I need the first input.
My parent ponent
const [code, setcode] = useState(new Array(6).fill(""));
OTP ponent
<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>
My function
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();
}
};
1 Answer
Reset to default 2If you just wanted the focus when the ponent mounts, you can use the index of the array. just add 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
/>
本文标签： javascriptFirst input autofocus for OTP input fields in ReactStack Overflow
版权声明：本文标题：javascript - First input autofocus for OTP input fields in React - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745542323a2155238.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论