时间戳

首页 > 解决方案 > 带有 React 的样式化组件 - 表单 onSubmit 不起作用

javascript - 带有 React 的样式化组件 - 表单 onSubmit 不起作用

问题描述

所以我想制作一个 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>
)};

标签： javascriptreactjsstyled-components

解决方案

试试这个

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

推荐阅读