0

Preciso criar uma tabela com Material UI que na verdade será uma matriz, o tamanho dessa matriz será dinâmico e preciso que as células da tabela sejam inputs que serão preenchidos e esses inputs irão criar a matriz de verdade que será passada para o servidor e será salva no banco.

Eu consegui gerar a tabela com os inputs e tudo mais, porém não sei como gerenciar os state dos dos inputs para pegar os valores que serão salvos, até então o código da tabela está assim:

import React, { useContext, useState } from 'react'
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Grid,
Button,
Paper
} from '@material-ui/core'

import { ProjetoContext } from 'contexts/projetos'

const TabelaPonderacao = () => {
  const { projetoAtual } = useContext(ProjetoContext)
  const [matriz, setMatriz] = useState([[]])

  console.log(matriz)

  const handleClickLimpar = () => {
    console.log('Limpou')
  }

  const handleClickSalvar = () => {
    console.log(matriz)
  }

return (
 <>
  <Grid container spacing={4}>
    <Grid item>
      <TableContainer component={Paper}>
        <Table aria-label='simple table'>
          <TableHead>

            <TableRow>
              <TableCell>Poderação dos Critérios</TableCell>
              {projetoAtual.criterios.map((criterio) => (
                <TableCell key={criterio.id}>{criterio.nome}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {projetoAtual.criterios.map((criterio) => (
              <TableRow key={criterio.id}>
                <TableCell>{criterio.nome}</TableCell>
                {projetoAtual.criterios.map((c) => (
                  <TableCell key={c.id}>
                    <TextField
                      id='outlined-basic'
                      variant='outlined'
                      onChange={(e) => {
                        const val = e.target.value
                        setMatriz(prevState => {
                          console.log(prevState)
                          return [...prevState, prevState[0].concat(val)]
                        })
                      }}
                    />
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Grid>

    <Grid container spacing={2} justify='flex-end'>
      <Grid item>
        <Button variant='outlined' onClick={handleClickLimpar}>
          Limpar
        </Button>
      </Grid>

      <Grid item>
        <Button variant='outlined' onClick={handleClickSalvar} color='primary'>
          Salvar
        </Button>
      </Grid>
    </Grid>
  </Grid>
 </>
 )
}

export default TabelaPonderacao

Exemplo:

Tabela com inputs gerados automaticamente

O state dos inputs devem me retornar uma matriz com esses valores:

[[1,3,5,3], [1/3,1,5,7], [1/5,1/5,1,5], [1/3,1/7,1/5,1]]

e ao clicar no salvar irei fazer a lógica de persistência.

9
  • não é no array criterios?
    – novic
    Commented 3/04/2020 às 12:47
  • não entendi? O que eu preciso é gerar uma matriz através do state, e fazer um setState nos inputs, só que não sei como fazer isso
    – JelSnow
    Commented 3/04/2020 às 12:58
  • Por exemplo, se fosse pra gerar um array, eu só precisaria fazer um prevState.concat() passando o valo do input, só que o que eu quero é gerar uma matriz e não sei como fazer isso.
    – JelSnow
    Commented 3/04/2020 às 13:00
  • Amigo se está querendo atualizar os dados de um enumeração de valores, tipo assim tem 3 inputs e consequentemente 3 estados e você precisa atualizar? é mais ou menos isso? outra coisa criterios.map é consequentemente um array? mas nesse código não tem declarado ele... onde ele está?
    – novic
    Commented 3/04/2020 às 13:26
  • Bom, adicionei o código completo. O que eu quero é a partir de um array de objetos, gerar inputs que receberam números e com esses números montar uma matriz. O que eu não estou conseguindo fazer é gerenciar o state dos inputs que estou criando dinamicamente. Eu não sei como fazer isso. Espero que agora tenha ficado claro o meu problema, se não é só perguntar que respondo.
    – JelSnow
    Commented 3/04/2020 às 18:06

1 Resposta 1

1

Se for atualizar um array de valores onde os input(s) terá o estado inicial, é mais ou menos assim (independente de Framework Css que utilize), exemplo:

function App() { 
  const [items, setItems] = React.useState([
    {name: "name 1"},
    {name: "name 2"},
    {name: "name 3"},
  ]);    
  function changeItems(e, index) {        
    let it = [...items];    
    it[index].name = e.target.value;
    setItems(it);
  }
  return (
    <div>
      {items.map((item, index) =>
        (<div>
          <input 
            value={item.name} 
            key={index} 
            onChange={e => changeItems(e, index)} 
          />
         </div>
        )
      )}
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

sendo que o array de items com os seus objetos serão atualizados e com os novos valores em items pode ser utilizado para qualquer fim.

Continuando a solução de problemas, foi relatado que os dados precisam ser um array de array onde cada linha é um item do array:

function App() { 
  const [items, setItems] = React.useState([
   ["0", "0", "0", "0"],
   ["1", "1", "1", "1"],
  ]);    
  function handleChange(e, position, line) {
    let it = [...items];
    it[line][position] = e.target.value;
    setItems(it);
  }
  return (
    <div>
      {items.map((array, line) => (<p>{ 
        array.map((a, position) => (
          <input 
            onChange={e => handleChange(e, position, line )}
            value={a} 
            style={{width:45, margin:3}} 
          />
        ))}
       </p>))}
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

no exemplo seguiu a lógica de carregar cada linha os dados dentro dos input e a próxima linha é o próximo array e assim por diante. Na função de alteração foi passado o event que contem as informações e a linha e coluna que vai acontecer as alterações copia o array imutável (não pode ser alterado diretamente) e enviado um novo valor para o novo array.

5
  • Utilizando array e objetos eu sei como fazer, o que não estou conseguindo é utilizar com uma matriz, como está la no código, eu quero gerar uma matriz a partir dos dados que vem dos inputs, mas a maneira que eu gero os inputs é a partir de uma lista, então não estou sabendo como gerenciar o state dos inputs. Espero que tenha ficado claro rsrsrs, qualquer dúvida pode perguntar
    – JelSnow
    Commented 6/04/2020 às 12:38
  • @JelSnow como deveria ficar essa Matrix, exemplifique porque uma Matrix assim talvez não seja necessário. Me dê exemplos na edição sua.
    – novic
    Commented 6/04/2020 às 20:08
  • Adicionei um exemplo a pergunta, espero que fique mais claro o que estou tentando fazer, obrigada pela ajuda.
    – JelSnow
    Commented 7/04/2020 às 10:44
  • @JelSnow foi editado. Preste também atenção o array de array precisa conter algum tipo de valor para que isso funcione.
    – novic
    Commented 7/04/2020 às 14:20
  • Era exatamente isso q eu não estava conseguindo fazer, muito obrigada, vou adaptar e colocar no meu código, muito obrigada mesmo.
    – JelSnow
    Commented 7/04/2020 às 17:56

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 .