提交表单返回代理对象，而不是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任何地方。你只是被日志和变量名弄糊涂了。你可以简单地省略它。