フォームを送信するとReactjのフォームデータの代わりにプロキシオブジェクトが返される

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の被制御コンポーネントdocsを参照してください。

と、ここでそれが参照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を使用していないので、だから、実際には、正しいです。あなたはログと変数名だけを混乱させました。あなたは単にそれを省略することができます。