-2

Fala galera, apos apanhar muito e não ter mais para onde ir, vim pedir a ajuda de vocês.

Meu cenário é estou com um formulário onde os campo são os fields dos redux-forms. Estou precisando, após o submit, limpar os campos, eu já li a documentação mas o código não funciona, apenas passando o dispatch(reset('nomeDoForm')).

Sei que pode parecer rídiculo, mas estou apanhando para fazer limpar o formulário, no botão Reset, até funciona, mas na action não

Alguém já passou por isso e/ou poderia me dar uma ajuda, abaixo meu código.

Action:

import axios from 'axios'
import { toastr } from 'react-redux-toastr'
import {reset as resetForm} from 'redux-form';

export const INIT = 'INIT';

const baseURL = 'http://localhost:3333/'

export const create = (values) => {
    axios.post(`${baseURL}usuario`, values)
        .then(resp => {
            toastr.success('Sucesso', 'Operação realizada com sucesso')
            dispatch(resetForm('userForm'))
        })
        .catch(e => {
            e.response.data.forEach(error => {
                toastr.error('Erro', error)
            });
        })
}

Reducer:

import * as UsuarioConstants from '../Actions/UsuarioActions'

const INITIAL_STATE = { nome: 'teste', login: '', senha: '', email: '', list: [] }

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case UsuarioConstants.INIT:
            return { ...state}
        case UsuarioConstants.LIMPAR_CAMPOS:
            return { ...state, nome: '', login: '', senha: '', email: '' }
        default:
            return state
    }
}

Formulário:

    import React, { Component } from 'react'
    import { reduxForm, Field } from 'redux-form'
    import { bindActionCreators } from 'redux'
    import { create } from '../../main/Actions/UsuarioActions'

    import Nav from '../components/Menu/Nav'
    import Rodape from '../components/Rodape'
    import { connect } from 'react-redux'


    class UsuarioForm extends Component {

        render() {

            const { handleSubmit, pristine, reset, submittinng } = this.props
            const submit = (data, create) => {
                create(data)
            }
            return (
                <div>
                    <Nav />
                    <form role="form" onSubmit={handleSubmit((fields) => submit(fields, create))}>
                        <div className="box-body">
                            <Field name="nome" component="input" />
                            <Field name="login" component="input" />
                            <Field name="senha" component="input" />
                            <Field name="email" component="input" />
                        </div>

                        <div className="box-footer">
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button type="button" className="btn btn-danger" disable={pristine || submittinng} onClick={reset}>Reset</button>
                        </div>
                    </form>
                    <Rodape />
                </div>
            )

        }
    }

const Form = reduxForm({
    form: 'userForm'
})(UsuarioForm)

const mapStateToProps = state => ({ nome: state.usuario.nome })

const mapDispatchToProps = dispatch => bindActionCreators({
    create
}, dispatch)


export default connect(mapStateToProps, mapDispatchToProps)(Form)

1 Resposta 1

-1

Olá, eu vou te dar um exemplo meu que tenho em uma aplicação pronta e você ajusta o código pra você:

Abaixo vai o meu reducer:

case LOGOUT_USER:
return {
  ...state
}
case LOGOUT_USER_SUCCESS:
return {
  INITIAL_STATE
}
case LOGOUT_USER_ERROR:
return {
  ...state
}

E aqui abaixo vai a minha action:

export const logoutUser = () => {
  return dispatch => {
    dispatch(
      {
        type: LOGOUT_USER
      }
    )
    try {
      logoutUserSuccess(dispatch)
    }
    catch (err) {
      logoutUserError(err, dispatch)
    }
  }
}

const logoutUserSuccess = (dispatch) => {
  dispatch(
    {
      type: LOGOUT_USER_SUCCESS
    }
  )
  AsyncStorage.removeItem('@token_jwt')
  console.log('saiu')
  Actions.loginScreen()
}

const logoutUserError = (err, dispatch) => {
  dispatch(
    {
      type: LOGOUT_USER_ERROR
    }
  )
  Alert.alert('Erro ao sair da conta')
  console.log(err)
}

Ao passar no sucesso o INITAL_STATE, os campos são limpos

Eu não uso o redux-form, mas a lógica é a mesma, espero ter ajudado.

1
  • eu tentei fazer assim também, ams por algum motivo o formulario não tem os campos limpos quando o state recebe o valor inicial que são os campos vazios 29/04/2020 às 17:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .