Как получить значения формы с помощью Material-UI - PullRequest
Новая
       18

Как получить значения формы с помощью Material-UI

0 голосов
/ 05 июня 2019

Я перепробовал много предложений по другим вопросам и ответам, но я не понял, почему моя форма не работает.

Я отправляю действие отправки формы, но не могуполучить значения в моей const login функции

Может кто-нибудь подсказать, как подойти к этой проблеме?

Login.js компонент: 

  import React, { useState, useEffect, useCallback, useContext } from 'react'
    import { Button, Grid, TextField } from '@material-ui/core'
    import { makeStyles } from '@material-ui/core/styles';

    import { AuthContext } from 'contexts/auth'

    function Login() {

      const { login } = useContext(AuthContext)

      return (
         <Container>
              <Grid container justify='center' spacing={4}>
                <Grid item xs={12} container justify='center'> 
                </Grid>
                <Grid item xs={12} container justify='center'>
                  <form onSubmit={login} >
                    <TextField
                      label='User'
                      name='username'
                      margin="normal"
                    />
                    <TextField
                      label='Pass'
                      name='password'
                      type="password"                
                      margin="normal"
                    />

                    <Button
                      variant="outlined"
                      size="small"
                      color="primary"
                      type="submit">
                      Entrar
                      </Button>
                  </form>
                </Grid>
              </Grid>
            </Container>
  )}
export default Login

Auth.js, где яобработать форму и где мне нужно получить значения формы.console.log ничего не печатает, и я получил эту ошибку

TypeError: Преобразование круговой структуры в JSON

auth.js компонент: 

import React, { createContext, useCallback } from 'react'

    export const AuthContext = createContext()


    function Auth({ children }) {

        const login = e => {
            e.preventDefault();
            console.log(e.target) //it doesn't print anything


            fetch('http://localhost:4000/login', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: e.target.elements.password,
                    password: e.target.elements.password,
                })
            })
                .then(response => {
                    if (response.ok) {
                        return response.text()
                    } else {
                        console.log('erro')
                        throw new Error('Error message')
                    }
                })                                      
        }

        return (
            <AuthContext.Provider value={{login}}>
                {children}
            </AuthContext.Provider>
        )
    }

export default Auth
...