2
respostas

Criar componente de abas no React

Como fazer para criar um Tab component (abas) no React ? Preciso organizar os atributos de um form já existente em abas (tabs).

2 respostas

Opa, tudo bem? Cara teria como colocar o código que você tem para entender melhor a sua questão.

Oi Nathan, obrigado pela resposta ! Consegui ajuda para fazer esta tarefa, vou colocar uma parte do codigo aqui :

import { Button, Grid, Typography, AppBar, Tabs, Tab } from '@material-ui/core';
import { TabPanel } from '@material-ui/lab';
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { clearForm, clearErrors } from '../../actions/formActions';
import PrivateInputWrapper from '../../components/inputs/PrivateInputWrapper';
import useSubmitForm from '../../components/useSubmitForm';
import scheme from './scheme';
import schemetabs from './scheme-tabs';
import { useFormStyles } from './styles';
import { makeStyles } from '@material-ui/core/styles';
import axios from '../../utils/axios';
import { openSnackBar } from '../../actions/snackBarAction';
import { useHistory } from 'react-router-dom';
import DateFnsUtils from '@date-io/date-fns';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import Box from '@material-ui/core/Box';
import PropTypes from 'prop-types';
import './Formulario.css';


const Formulario = ({ template }) => {
  const classes = useFormStyles();
  const history = useHistory();
  const submitForm = useSubmitForm();
  const dispatch = useDispatch();
  let [holidayList, setholidayList] = useState([]);

  const handleSave = async values => {
    try {
      const id = template?.id;
      scheme.concat(schemetabs);
      const payload = createParameter(values, scheme);

      console.log(payload);
      if (id) {
        await axios.put(`/v1/mdc/template/${id}`, payload);
      } else {
        await axios.post('/v1/mdc/template', payload);
      }

      dispatch(clearForm());
      setholidayList([{ date: null }]);
      dispatch(clearErrors());
      dispatch(openSnackBar('Sucesso ao salvar', 'success'));

      history.push('/templates');
    } catch (e) {
      dispatch(openSnackBar('Falha ao salvar', 'error'));
    }
  };