在React中，我希望如果在表单中输入一些东西，另一个表单立即设置为焦点。
例如:
<html>
<head>
<title>React App</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
//Now its basically like React
function Inputs() {
const [otp, setOtp] = React.useState([]); //Here are stored the Values of the numbers
const itemsRef = React.useRef([]); //Here are stored the refs of the numbers
const setOtpfunction = (e, i) => {
const key = parseInt(e.key); //I first parse the key that i got from onKeyPress to a number
if (key) {
let OTP = [...otp];
OTP[i] = key;
setOtp(OTP); //Then i update the numbers
if (i < 5) {
const nextForm = i + 1; //Here i say that the next item schould be the item with the index + 1
ref[i].focus(); //And here i set the focus. ref.current.focus() wouldnt work in this case
}
}
};
return (
<div className="space-x-2">
<input
placeholder="first input"
type="number"
className="otpNumber"
onChange={(e) => (e = null)} //that there is no error because there is no onChange function
required
onKeyPress={(e) => setOtpfunction(e, 0)}
ref={(ref) => (itemsRef[0] = ref)}
autoFocus
value={otp[0] || ""}
/>
<input
placeholder="second input"
type="number"
className="otpNumber"
onChange={(e) => (e = null)} //that there is no error because there is no onChange function
onKeyPress={(e) => setOtpfunction(e, 1)}
ref={(ref) => (itemsRef[1] = ref)}
value={otp[1] || ""}
/>
<input
placeholder="third input"
type="number"
className="otpNumber"
onChange={(e) => (e = null)} //that there is no error because there is no onChange function
onKeyPress={(e) => setOtpfunction(e, 2)}
ref={(ref) => (itemsRef[2] = ref)}
value={otp[2] || ""}
/>
<p>Now you can type in 1 number in the inputs and they are stored in UseState. But i want that if in the first input, one number is entered, it focuses the second input and so on</p>
</div>
);
}
class Render extends React.Component {
render() {
return (
<div>
<Inputs />
</div>
);
}
}
ReactDOM.render(<Render />, document.getElementById("mydiv"));
</script>
</body>
</html>控制台的错误只是一个警告，提醒您应该为生产环境编译脚本。
我还用document测试了它。
我希望你能明白我的意思。感谢您提供的任何答案!我宁愿做一个单一的Input组件，当用户输入一些东西并相应地更新状态时通知父组件:
const OTP_LENGTH = 4;
export default function OTPForm() {
const [index, setIndex] = useState(0);
function done() {
if (index === OTP_LENGTH - 1) {
console.log("All inputs filled");
return;
}
setIndex(index + 1);
}
return (
<form>
{Array.from({ length: OTP_LENGTH }, (_, i) => (
<Input key={i} isCurrent={i === index} done={done} />
))}
</form>
);
}
function Input({ isCurrent, done }) {
const ref = useRef(null);
useEffect(() => {
if (isCurrent && ref.current) {
ref.current.focus();
}
}, [isCurrent]);
function onInput(event) {
if (event.target.value.length > 1) {
event.preventDefault();
return;
}
if (event.target.value.length === 1) {
done();
}
}
return <input ref={ref} onInput={onInput} type="number"/>;
}
Codesandbox
由您决定从父组件公开适当的onError/onSubmit处理程序。