我正在尝试使用 React-Bootstrap 获取表单输入的值

Question

我的表单没有捕获输入。遵循此线程后，我的代码对我来说看起来是正确的。这是我的：

import { NavLink, useNavigate } from "react-router-dom";
import { useState } from 'react';
import { Card, Row, Col, Container, Form, Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function Signup({setUser}) {
  const navigate = useNavigate();

  const [ formData, setFormData ] = useState({
    username: '',
    email: '',
    password: ''
})
const [ errors, setErrors ] = useState([])

function handleChange(e) {
    const key = e.target.name;
    const value = e.target.value;
    setFormData({...formData, [key]: value})
}

function handleSubmit(e) {
    e.preventDefault();
    fetch('/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(res => {
        if (res.ok) {
            res.json().then(setUser)
            navigate("/")
            setFormData({
                email: '',
                password: ''
            })
        } else {
            res.json().then(errorResponse => setErrors(errorResponse.errors))
        }
    })
}

  return (
    <div className="App-header">
      <div>
                <h1>Sign Up</h1>
         <Form onSubmit={handleSubmit} id="myForm" >
            <Form.Group className="mb-3" controlId="formUsername" >  
                <Form.Label> Username</Form.Label>
                <Form.Control type="text" placeholder="Username" onChange={handleChange}/>
            </Form.Group>
            <Form.Group className="mb-3" controlId=" formEmail"> 
                <Form.Label> Email Address</Form.Label>
                <Form.Control type="email" placeholder="Enter email" onChange={handleChange}/>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formPassword"> 
                 <Form.Label> Password</Form.Label>
                 <Form.Control type="password" placeholder="Enter password" onChange={handleChange}/>
                 {errors.length > 0 ? <div className="error-container">{errors.map(error => <p className="error" key={error}>{error}</p>)}</div> : <div></div>}
            </Form.Group>
            <Button variant="success" type="submit" form="myForm">
                Submit
            </Button>           
        </Form>
    </div>
        </div>
  );
}

export default Signup;

我收到错误消息说用户名/电子邮件/密码不能为空。对我来说有趣的是我有相同的代码，但没有使用 bootstrap，而且它有效。感谢帮助。

Answer 1

我认为每个 Form.Control 都应该有 name 属性。例如，

<Form.Control name="username" type="text" placeholder="Username" onChange={handleChange}/>

<Form.Control name="email" type="email" placeholder="Enter email" onChange={handleChange}/>

<Form.Control name="password" type="password" placeholder="Enter password" onChange={handleChange}/>

我正在尝试使用 React-Bootstrap 获取表单输入的值

I am trying to get the value of a form input using React-Bootstrap

javascript

reactjs

react-bootstrap