React 控制输入光标跳转

React是一种流行的JavaScript库，用于构建用户界面。在React中，我们经常需要处理表单输入，包括将光标移动到特定的输入字段。本文将探讨如何利用React控制输入光标的跳转，并提供一个案例代码。

javascript
import React, { useRef, useState } from 'react';
const Form = () => {
  const inputRef1 = useRef(null);
  const inputRef2 = useRef(null);
  const [inputValue1, setInputValue1] = useState('');
  const [inputValue2, setInputValue2] = useState('');
  const handleChange1 = (e) => {
    setInputValue1(e.target.value);
  };
  const handleChange2 = (e) => {
    setInputValue2(e.target.value);
  };
  const handleKeyDown1 = (e) => {
    if (e.key === 'Enter') {
      inputRef2.current.focus();
    }
  };
  const handleKeyDown2 = (e) => {
    if (e.key === 'Enter') {
      // 在这里可以执行下一步操作
    }
  };
  return (
    
              ref={inputRef1}
        value={inputValue1}
        onChange={handleChange1}
        onKeyDown={handleKeyDown1}
      />
              ref={inputRef2}
        value={inputValue2}
        onChange={handleChange2}
        onKeyDown={handleKeyDown2}
      />
    
  );
};
export default Form;

javascript
import React, { useRef, useState } from 'react';
const Form = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleChangeName = (e) => {
    setName(e.target.value);
  };
  const handleChangeEmail = (e) => {
    setEmail(e.target.value);
  };
  const handleChangePassword = (e) => {
    setPassword(e.target.value);
  };
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      if (name === '') {
        nameRef.current.focus();
      } else if (email === '') {
        emailRef.current.focus();
      } else if (password === '') {
        passwordRef.current.focus();
      } else {
        // 在这里可以执行下一步操作
      }
    }
  };
  return (
    
              ref={nameRef}
        value={name}
        onChange={handleChangeName}
        onKeyDown={handleKeyDown}
        placeholder="姓名"
      />
              ref={emailRef}
        value={email}
        onChange={handleChangeEmail}
        onKeyDown={handleKeyDown}
        placeholder="电子邮件"
      />
              ref={passwordRef}
        value={password}
        onChange={handleChangePassword}
        onKeyDown={handleKeyDown}
        placeholder="密码"
        type="password"
      />
    
  );
};
export default Form;