提交表单时onsubmit绑定的addUserHandler函数未执行问题

你的代码里有两个关键问题导致addUserHandler无法执行：

1. 未声明的nameInputRef变量 #

代码中使用了ref={nameInputRef}但没有创建这个ref，React会抛出运行时错误，组件渲染失败后自然无法触发表单提交事件。需要先通过useRef钩子创建这个ref：

import React, { useRef } from 'react'; // 引入useRef
// ...
const Form = function (props) {
  const nameInputRef = useRef(); // 在组件内定义ref
  // ...
};

2. 自定义Button组件未正确转发属性 #

如果你的Button组件没有将type="submit"传递给底层的原生<button>元素，点击按钮时不会触发表单的onsubmit事件。确保Button组件的实现正确转发所有props：

// Button.jsx
import React from 'react';

const Button = (props) => {
  return <button type={props.type} {...props}>{props.children}</button>;
};

export default Button;

这样type="submit"会被正确应用到底层按钮，点击时就能触发表单的提交逻辑。

修复后的完整代码 #

import React, { useRef } from 'react';
import styles from './Form.module.css';
import Button from './Button';

const Form = function (props) {
  const nameInputRef = useRef();

  const addUserHandler = function (e) {
    e.preventDefault();
    console.log(135);
    // 可选：通过ref获取输入框的值
    console.log(nameInputRef.current.value);
  };

  return (
    <form onSubmit={addUserHandler}>
      <input
        type='text'
        className={styles.input}
        placeholder='Your Age'
        ref={nameInputRef}
      />

      <Button type='submit'>add user</Button>
    </form>
  );
};

export default Form;

内容的提问来源于stack exchange，提问作者khaled mohy