React 中的样式化组件：<Form /> onSubmit 处理程序不起作用

Question

表单组件的类型为styled.form``，在文件底部的组件外部定义。问题：onSubmit 事件处理程序不起作用。官方文档没有关于 onSubmit 的任何内容。

   const submitHandler = e => {
      e.preventDefault()
      console.log(e) // nothing appears in console
   }


/// ... in JSX:

         <Form onSubmit={submitHandler} >
            <Input placeholder="YouTube URL" required name="input" onChange={changeHandler} />
            <Button type="submit" >
               <Icon /> <Span>Add Song</Span>
            </Button>
         </Form>

//... styled form defined at the bottom of the file below export default statement:

const Form = styled.form`
   display: flex;
`

我发现的 解决方案 是将 submitHandler 附加到表单内按钮的 onClick 事件。我不确定，因为我过去从未使用过 submitHandlers 按钮（而且我认为它甚至不能在纯 React 中使用）。

所以，这行得通：

<Button type="submit" onClick={submitHandler} >Submit</Button>

Answer 1

问题出在按钮上。您将 <Button> 组件实现为 <div> 样式组件。就表单而言，<div> 上的 type="submit" 没有任何影响。这就是 submit 事件从未被触发的原因。

因此，您可以按如下方式更改代码：

const Button = styled.button
从按钮中删除 onClick 并将 onSubmit 简单地更改为 submitHandler:

    <div>
      <Form onSubmit={submitHandler}>
        <Input
          placeholder="Paste YouTube URL here"
          required
          name="input"
          onChange={changeHandler}
        />
        <Button type="submit">
          <Icon /> <Span>Add Song</Span>
        </Button>
      </Form>
    </div>

您将在 UI 中看到结果，因为表单将开始应用验证（因为输入上的 required 属性），并且还会在处理程序将记录的控制台中看到结果.

React 中的样式化组件：<Form /> onSubmit 处理程序不起作用

Styled Components in React: <Form /> onSubmit handler does not work

styled-components