提交表單返回代理對象，而不是Reactjs中的表單數據

Question

我在Reactjs中使用semantic-ui創建登錄表單。請看以下代碼：

的登錄表單本身：

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; 

登錄容器（父組件）是如下：

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; 

當我試圖安慰日誌值父組件的handleSubmit函數總是返回代理對象，而不是表單值或表單數據。

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

任何人都可以讓我知道我哪裏錯了？

感謝

Answer 1

「代理」 對象似乎是一個Event對象。確實semantic-ui docs say

我們處理數據就像一個香草React。有關更多信息，請參閱React的受控組件文檔。

，這裏是the vanilla react example它指的是：

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

所以用這個庫是你自己的責任，從您的國家/存儲檢索表單數據，它不傳遞到onSubmit自動。

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

所以實際上它是正確的，因爲你擁有它，因爲你沒有使用此參數e/values任何地方。你只是被日誌和變量名弄糊塗了。你可以簡單地省略它。