Le formulaire de soumission renvoie l'objet proxy au lieu des données de formulaire dans Reactjs

Question

Je crée un formulaire de connexion en utilisant sémantique-ui dans Reactjs. S'il vous plaît trouver le code ci-dessous:

Le formulaire de connexion lui-même:

import React from 'react'; 
import { Form, Button } from 'semantic-ui-react'; 

const LoginPage = ({ email, password, handleChange, handleSubmit, errors }) => (
    <Form onSubmit={handleSubmit}> 
     <Form.Field> 
      <label htmlFor="email">Email:</label> 
      <input 
       type="email" 
       name="email" 
       id="email" 
       placeholder="example@example.com" 
       value={email} 
       onChange={(e) => handleChange(e)} 
      /> 
     </Form.Field> 
     <Form.Field> 
      <label htmlFor="password">Password:</label> 
      <input 
       type="password" 
       name="password" 
       id="password" 
       value={password} 
       onChange={(e) => handleChange(e)} 
      /> 
     </Form.Field> 
     <Button primary> Login </Button> 
    </Form> 
); 

export default LoginPage; 

Le conteneur de connexion (composant parent) est comme ci-dessous:

import React, { Component } from 'react'; 
import { LoginPage } from '../components'; 
import Validator from 'validator'; 

class Login extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      data: { 
       email: '', 
       password: '' 
      }, 
      loading: false, 
      errors: {} 
     } 
    } 

    handleChange = (e) => { 
     this.setState({ 
      data: { ...this.state.data, [e.target.name]: e.target.value } 
     }); 
    } 

    handleSubmit = (values) => { 
     console.log(values); 
     const errors = this.validate(this.state.data); 
     this.setState({ 
      errors: errors 
     }) 
    } 

    validate = (data) => { 
     const errors = {}; 
     if (!Validator.isEmail(data.email)) errors.email = "Invalid Email"; 
     if (!data.password) errors.password = "Password cannot be blank"; 
     return errors; 
    } 

    render() { 
     return (
      <LoginPage 
       email={this.state.data.email} 
       password={this.state.data.password} 
       handleChange={this.handleChange} 
       handleSubmit={this.handleSubmit} 
       errors={this.state.errors} 
      /> 
     ) 
    } 
} 

export default Login; 

Lorsque je tente de consoler les valeurs du journal dans la La fonction handleSubmit du composant parent renvoie toujours l'objet proxy à la place des valeurs de formulaire ou des données de formulaire.

Proxy {dispatchConfig: {…}, _targetInst: ReactDOMComponent, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …} 

Quelqu'un pourrait-il me dire où je me trompe?

Merci

Answer 1

L'objet "Proxy" semble être un objet Event. En effet, le semantic-ui docs say

Nous manipulons les données de la même façon qu'une réaction de vanille. Voir les documents sur les composants contrôlés de React pour plus d'informations.

et voici the vanilla react example il se réfère à:

handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
} 

Donc, avec cette bibliothèque, il est votre propre devoir de récupérer les données de formulaire de votre état/magasin, il est pas passé à onSubmit automatiquement.

handleSubmit = (e) => { 
    console.log(e); 
    const errors = this.validate(this.state.data); 
    this.setState({ 
     errors: errors 
    }) 
} 

Donc en fait il est exact que vous avez, parce que vous n'utilisez pas ce paramètre e/values partout. Vous étiez seulement confus par le journal et votre nom de variable. Vous pourriez simplement l'omettre.