RECT-清除电子邮件输入字段，表单提交后

Question

提交表单后，密码字段输入被清空，而不是电子邮件输入字段。

正如您在Handlesubmit函数中看到的那样： ref.current.value =“”;是我用来在提交后清除输入字段的尝试，但它仅用于密码输入字段。

我在此上查看了其他一些答案，并且我尝试了e.target.reset（），并且我也尝试了setfield（“”）;还没有运气。

import React from 'react';
import Form from 'react-bootstrap/Form';
import { Button } from 'react-bootstrap';
import { Container } from 'react-bootstrap';
import { useState } from 'react';
import { useRef } from 'react';

const allThis = () => {
  const [form, setForm] = useState({})
  const [errors, setErrors] = useState({})

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value
    })
    // Check and see if errors exist, and remove them from the error object:
    if (!!errors[field]) setErrors({
      ...errors,
      [field]: null
    })
  }

  const ref = useRef(null); // set up empty field

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = findFormErrors()
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors)
    } else {
      alert('Thank you for your feedback!');
      ref.current.value = ""; // empty the field
    }
  }

  const findFormErrors = () => {
    const { email, password } = form
    const newErrors = {};
    if (!email || email === '') newErrors.email = 'cannot be blank!';
    /* else if (email.length > 30) newErrors.email = 'email is too long!'; */
    if (!password || password === " ") newErrors.password = "cannot be blank";
    return newErrors
  }

  return (
    <Container>
      <Form className="reduceForm">
        <Form.Label className="contact">Contact Me</Form.Label>
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control input ref={ref} type="email" placeholder="Enter email"  
            onChange={e => setField('email', e.target.value)}
            isInvalid={!!errors.email} />
          <Form.Control.Feedback type='invalid'>
            {errors.email}
          </Form.Control.Feedback>
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control input ref={ref} type="password" placeholder="Password"
            onChange={e => setField('password', e.target.value)}
            isInvalid={!!errors.password} />
          <Form.Control.Feedback type='invalid'>
            {errors.password}
          </Form.Control.Feedback>
        </Form.Group>
        <Button onClick={handleSubmit} variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </Container>
  )

}

export default allThis

Answer 1

您将一个Ref设置为两个不同的字段。因此，只有最后一个是保留的，即密码一个（以及电子邮件字段的裁判被覆盖）为他们使用2种不同的裁判。如果可能的话，请参考您的表格，如果React-Bootstrap/表单支持它。

Answer 2

您必须声明电子邮件和密码不同的变量。我更喜欢使用Usestate。

const [email, setEmail] = useState("");
const [password, setPassword] = useState("")

// Input
<Form.Control input value={email} type="email" placeholder="Enter email"  
        onChange={e => setEmail(e.target.value}
        isInvalid={!!errors.email} />
<Form.Control input value={password} type="password" placeholder="Password"  
        onChange={e => setPassword(e.target.value}
        isInvalid={!!errors.password} />

// handleSubmit
setEmail("");
setPassword("");

Answer 3

React团队建议使用状态代替参考来声明写作表格。您已经将输入设置为“更改”时的输入，因此您可以通过将价值道具传递给输入来更容易地维护。

import React from 'react';
import Form from 'react-bootstrap/Form';
import { Button } from 'react-bootstrap';
import { Container } from 'react-bootstrap';
import { useState } from 'react';

const initialForm = {
  email: '',
  password: ''
};

export default function AllThis() {
  const [form, setForm] = useState(initialForm);
  const [errors, setErrors] = useState({});

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value
    });
    // Check and see if errors exist, and remove them from the error object:
    if (!!errors[field])
      setErrors({
        ...errors,
        [field]: null
      });
  };

  const handleSubmit = e => {
    e.preventDefault();
    const newErrors = findFormErrors();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      alert('Thank you for your feedback!');
      setForm(initialForm);
    }
  };

  const findFormErrors = () => {
    const { email, password } = form;
    const newErrors = {};
    if (!email || email === '') newErrors.email = 'cannot be blank!';
    /* else if (email.length > 30) newErrors.email = 'email is too long!'; */
    if (!password || password === ' ') newErrors.password = 'cannot be blank';
    return newErrors;
  };

  return (
    <Container>
      <Form className="reduceForm">
        <Form.Label className="contact">Contact Me</Form.Label>
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            input
            type="email"
            placeholder="Enter email"
            value={form.email}
            onChange={e => setField('email', e.target.value)}
            isInvalid={!!errors.email}
          />
          <Form.Control.Feedback type="invalid">
            {errors.email}
          </Form.Control.Feedback>
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            input
            type="password"
            placeholder="Password"
            value={form.password}
            onChange={e => setField('password', e.target.value)}
            isInvalid={!!errors.password}
          />
          <Form.Control.Feedback type="invalid">
            {errors.password}
          </Form.Control.Feedback>
        </Form.Group>
        <Button onClick={handleSubmit} variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </Container>
  );
}

https://codesandbox.io/s/reaect-clearing-email-email-input-field-field-form-submission-o41dki?file=/src/allthis.js.js