React中如何处理回车键提交？按回车Send OTP按钮无响应

问题原因 #

react-phone-input-2封装的手机号输入组件，内部可能阻止了回车键的默认表单提交行为，或是事件未正确冒泡到父级表单；另外Button上多余的form属性（已在表单内部）也可能干扰默认提交逻辑。

解决方案 #

1. 给表单添加ref，用于手动触发提交
2. 在PhoneInput的输入框上监听回车键事件，手动触发表单提交
3. 移除Button上不必要的form属性

修改后的完整代码 #

import { useRef, useState } from 'react';
import { FormControl, Button } from '@mui/material';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

const YourComponent = () => {
  const formRef = useRef(null);
  const [phone, setPhone] = useState('');
  const [moberr, setMoberr] = useState('');

  const otp_validation = (e) => {
    e.preventDefault();
    // 此处添加你的OTP验证逻辑
    console.log('提交的手机号:', phone);
  };

  return (
    <form 
      onSubmit={otp_validation} 
      className={Styles.lognform} 
      id="loginform"
      ref={formRef}
    >
      <FormControl>
        <PhoneInput
          className={Styles.phoneinpt}
          fullWidth
          name="phoneNumber"
          type="text"
          country="ae"
          enableAreaCodes={true}
          placeholder="Your mobile number"
          inputProps={{
            name: "phone",
            country: "us",
            required: true,
            autoFocus: true,
            onKeyDown: (e) => {
              if (e.key === 'Enter') {
                e.preventDefault();
                formRef.current?.submit();
              }
            }
          }}
          onChange={(e) => setPhone(e)}
          countryCodeEditable={false}
          onlyCountries={["ae"]}
          required
        />
        <h6 style={{ fontSize: "12px", color: " red" }}>{moberr}</h6>
      </FormControl>
      <Button
        type="submit"
        className={Styles.btnStyle}
        variant="contained"
      >
        send OTP
      </Button>
    </form>
  );
};

export default YourComponent;

额外说明 #

• 手动监听回车键可以绕过react-phone-input-2内部的事件拦截，确保回车能触发提交
• 表单ref的使用保证了能精准触发表单的submit方法，不受组件封装的影响
• 移除Button的form属性是因为当Button在表单内部时，type="submit"会自动关联父级表单，额外指定反而可能引发冲突

内容的提问来源于stack exchange，提问作者Asmath S