我是 React 的新手，我有一個簡單的應用程式，用戶可以在其中通過單擊“登錄”按鈕時顯示的模式視窗登錄。用戶資料存盤在 MongoDB 集合中，為了驗證用戶在模式視窗中輸入的電子郵件和密碼，應用程式向服務發送請求，該服務回傳已登錄用戶的資料，如果發生任何錯誤，則不回傳。如果用戶存在，id 存盤在本地存盤中，那么它必須重定向到另一個頁面。問題是顯然方法“onSession”不存在，因此生成警告：“事件處理程式的未知屬性onSession”。
我創建了三個組件：“LoginForm.js”、“LoginModal.js”和“Menu.js”。第一個欄位包含電子郵件和密碼以及登錄驗證欄位，第二個欄位具有模式視窗的屬性，最后一個欄位用于顯示“登錄”按鈕的導航欄。
登錄表單.js：
import React from 'react';
import { Col, Row, Form, Stack, Button, Image } from 'react-bootstrap';
import LoginIMG from '../../../assets/login.png'
import './LoginForm.css';
class LoginForm extends React.Component{
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
if(this.state.email === '' || this.state.password === '') {
alert('You must fill all inputs');
}else{
fetch('http://localhost:8080/api/user/' this.state.email '/' this.state.password)
.then(res => res.json())
.then(data => {
if(data.id !== null) {
localStorage.setItem('idUser', data.id);
this.props.onHide();
this.props.onSession();
}else{
alert('Wrong password or username');
}
});
}
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<div className="form">
<br />
<Row className="justify-content-md-center">
<Form onSubmit={this.handleSubmit}>
<Stack gap={3}>
<Row className="justify-content-md-center">
<Col lg={6} md={4} className='text-center'>
<Image src={LoginIMG} className="avatar" roundedCircle />
</Col>
</Row>
<Row className="justify-content-md-center">
<Col lg={6}>
<Form.Group controlId="formEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" name="email" value={this.state.email} onChange={this.handleChange} placeholder="Enter email" />
</Form.Group>
</Col>
</Row>
<Row className="justify-content-md-center">
<Col lg={6}>
<Form.Group controlId="formPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" name="password" value={this.state.password} onChange={this.handleChange} />
</Form.Group>
</Col>
</Row>
<Row className="justify-content-md-center">
<Col lg={6} className="d-grid gap-2">
<Button type="submit" variant="success" size="lg">Login</Button>
</Col>
</Row>
</Stack>
</Form>
</Row>
</div>
);
}
}
export default LoginForm;
登錄Modal.js：
import LoginForm from '../../forms/loginForm/LoginForm'
import { Modal } from 'react-bootstrap';
import './LoginModal.css';
function LoginModal(props){
return (
<Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{props.title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<LoginForm onHide={props.onHide} />
</Modal.Body>
<Modal.Footer>
{/* <Button onClick={props.onHide}>Close</Button> */}
</Modal.Footer>
</Modal>
);
}
export default LoginModal;
選單.js：
import React from 'react';
import {Navbar, Nav, Container} from 'react-bootstrap';
import { Link } from "react-router-dom";
import LoginModal from '../../modals/loginModal/LoginModal';
import { useState } from 'react';
function Menu(){
const [modalShow, setModalShow] = useState(false);
const [idUser, setIdUser] = useState(0);
const setSession = () => {
if(localStorage.getItem('idUser') != null){
setIdUser(localStorage.getItem('idUser'));
console.log(idUser);
}
}
return(
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container>
<Link className='navbar-brand' to="/">Divina Comedia</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Link className='nav-link' to="/">Home</Link>
{idUser === 0 ? <Nav.Link id="login" onClick={() => setModalShow(true)}>Login</Nav.Link> : null }
{idUser !== 0 ? <Link className='nav-link' to="/orders">Orders</Link> : null }
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<LoginModal show={modalShow} onHide={() => setModalShow(false)} onSession={() => setSession()} />
</>
);
}
export default Menu;
我真的不知道出了什么問題，任何幫助表示贊賞。
uj5u.com熱心網友回復：
onSession={() => setSession()}
這被傳遞到LoginModal，然后傳遞到ModalLoginModal.js 中：
<Modal {...props}
并Modal 最終將其放在 <div>. 沒有具有該名稱的 dom 事件，因此您會收到錯誤訊息。
如果該道具用于LoginModal，那么請確保您在那里處理它，并且不要使用傳播語法將其傳遞給 Modal。例如：
function LoginModal({ onSession, ...rest }){
// Do something with the onSession prop
return (
<Modal {...rest} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
// Or maybe do something with it here?
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/381724.html
標籤：javascript 反应 MongoDB 验证 拿来