Question

此Form有什么问题，当我单击Submit按钮时，未调用signInSubmitHandler（）函数，我使用onClick用一个简单的Button测试了它，它可以工作，但如果我将Form与Submit按钮一起使用，则不起作用。（即使用reactjs）

在SignInForm.jsx文件中：

    const SignInForm = (props) => {
    return (
        <React.Fragment>
            <h1>Welcome to ToDo</h1>
            <form onSubmit={props.signInSubmitHandler} className={style.signInForm}>
                <div className={style.signInFormImportantElements}>
                    <span className={style.userFormsErrors}>{props.userEmailError}</span>
                    <input
                        name="userEmail"
                        type="email"
                        placeholder="email"
                        value={props.currentUserEmailText}
                        className={style.signInText}
                        onChange={(e) => {
                            props.signInOnChangeHandler(e);
                        }}
                        onBlur={(e) => props.signInOnBlurHandler(e)}
                    />
                    <span className={style.userFormsErrors}>{props.userPasswordError}</span>
                    <input
                        name="userPassword"
                        type="password"
                        placeholder="password"
                        value={props.currentUserPasswordText}
                        className={style.signInText}
                        onChange={(e) => {
                            props.signInOnChangeHandler(e);
                        }}
                        onBlur={(e) => props.signInOnBlurHandler(e)}
                    />
                    <input type="submit" value="Submit" className={style.signInSubmit} />
                </div>
                <div className={style.signInLinks}>
                    <a href="#">Forget Password</a>
                    <a href="#">Create Account</a>
                </div>
            </form>
        </React.Fragment>
    );
};

在app.jsx文件中：

signInSubmitHandler() {
    console.log('waaaat');
}

Form Code image

props

signInSubmitHandler binding

signInSubmitHandler function

Answer 1

您的函数只有一个参数

  signInSubmitHandler(e) {
    console.log('waaaat');

  }

所以试试这个

  <form onSubmit={(e) => props.signInSubmitHandler(e)} className={style.signInForm}>

为什么此onSubmit不调用其功能？

1 个答案: