在 React 中验证样式化组件的非空字符串

Question

我目前正在将styled-componentsReact 中的库用于Form. 单击POST“创建”时，组件会发送请求。Buttonimport { Form, Button } from "react-bootstrap";import React, { useState, useEffect } from "react";import styled from "styled-components";const StyledInput = styled(Form.Control)`  padding: 2px 5px;  width: 150px;  margin-right: 20px;  height: 50px;`;function Builder() {const [name, setName] = useState(""); return (    <GridWrapper>      <h1>Builder</h1>      <Form>        <Form.Row>          <Form.Group controlId="name" bssize="large">            <Form.Label>Probet Name</Form.Label>            <StyledInput              size="sm"              required              value={name}              type="String"              onChange={(e) => setName(e.target.value)}              className="smaller-input"            />          </Form.Group>        </Form.Row>      </Form>      <Button type="submit" onClick={handleSubmit}>        Create      </Button>    </GridWrapper>  );}My question is, I have passed the `required` prop into the `StyledInput` component, yet when I click on the "Create" `Button` it still sends through an empty String. Is there a quick way to validate this using `styled-components` or do I have to write something myself in the `handleSubmit` function?   

Answer 1

将Buttonof移到type="submit"the 的内部Form，以便进行验证。至于提交，你可以使用 的onSubmitprop来处理Form，而不是点击Button

<Form onSubmit={handleSubmit}>

  <Form.Row>

    <Form.Group controlId="name" bssize="large">

      <Form.Label>Probet Name</Form.Label>

      <StyledInput

        size="sm"

        required

        value={name}

        type="String"

        onChange={(e) => setName(e.target.value)}

        className="smaller-input"

      />

    </Form.Group>

  </Form.Row>

  <Button type="submit">

    Create

  </Button>

</Form>

请注意，如果您在提交之前执行其他逻辑或执行 XHR 而不是重定向，则可以在处理提交时选择preventDefault在事件对象上使用

例子：

<Form onSubmit={(e)=>handleSubmit(e)}>

function handleSubmit(e) {

  e.preventDefault();

  //some logic

}

const [name, setName] = useState("")最后，您在功能组件主体之外使用钩子（即）。这会导致错误——我建议将它移到里面function Builder