我正在嘗試使用 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;

我收到錯誤消息，指出用戶名/Email/密碼不能為空。 對我來說有趣的是我有相同的代碼，但沒有使用引導程序，而且它可以工作。 感謝幫助。

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}/>