為什么我提交表單時function沒有執行？

Question

我傳遞給onsubmit事件的function在表單提交時沒有執行

import React from 'react';
import styles from './Form.module.css';

import Button from './Button';

const Form = function (props) {

  const addUserHandler = function (e) {
    e.preventDefault();
    console.log(135);
  };

  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;

我預計 function adduserhandler將在我提交表單時執行。

Answer 1

您沒有將type從<Button>正確傳遞到<button> ，這意味着submit按鈕呈現為不提交表單的普通按鈕。 代替：

<button type={props.type ? 'button' : props.type}>

做：

<button type={props.type ? props.type : 'button'}>

或更短：

<button type={props.type || 'button'}>