帶有 React 的樣式化組件 - 表單 onSubmit 不起作用

Question

所以我想制作一個 Styled Components 表單組件，然后在更大的 React 組件中使用它。 問題是，當我想附加一個 onSubmit 時，它並沒有真正起作用。 我的樣式化組件表單組件：

const FormWrapper = styled.form`
    margin: 2vw 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
`;

我的反應父組件：

const Form = () => {

  const handleSubmit = (e)=>{
    e.preventDefault();
    console.log('submitted');
  };

  return(
      <FormWrapper>
          <Input name="username" placeholder="username"/>
          <ErrorMssg >This username doesn't exist!</ErrorMssg>
          <Submit value="register"/>
      </FormWrapper>
)};

我試過這樣的事情：

<FormWrapper onSubmit={handleSubmit}>

甚至在我的 Styled Components 組件中也是這樣：

const FormWrapper = styled.form.attrs({
  onSubmit:props=>props.onSubmit}`
})`
  margin: 2vw 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
`;

現在我讓它工作了：

const FormWrapper = styled.div`
  form{
    margin: 2vw 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
`;

const Form = () => {

  const handleSubmit = (e)=>{
    e.preventDefault();
    console.log('submitted');
  };

  return(
      <FormWrapper>
         <form autoComplete="off">
           <Input name="username" placeholder="username" autoComplete="off"/>
           <ErrorMssg >This username doesn't exist!</ErrorMssg>
           <Password name="password" placeholder="password" autoComplete="off"/>
           <ErrorMssg>The password is wrong!</ErrorMssg>
           <Submit value="log in"/>
         </form>
    </FormWrapper>
)};

Answer 1

嘗試這個

<Submit value="log in" onClick={handleSubmit}/>