1

Tenho um objeto da seguinte forma:

var ItensMenu = [
    {title: 'Nome', type: 'input', id: 'id1'},
    {title: 'CPF', type: 'number', id: 'id2'},
    {title: 'Data de Nascimento', type: 'date', id: 'id3'},
    {title: 'Data de Cadastro', type: 'date', id: 'id4'},
]

Assim sendo, quero criar um formulário com o map(), da seguite forma:

const [date, setDate] = useState('2018-04-01 16:00:00');

            <TextInput 
               value={date}
               nativeID={nativeID}
            onChangeText={onChangeText}

Como uso o useState nesse caso?

Pois quero construir esses inputs com um while, daí quando eu fizer a alteração no state específico, quero que altere apenas o campo referenciado. O Objeto irá vir de uma API então não posso escrever o código do useState pra cada input, pois os inpust que vão vir são de qualquer nome e quantidades.


Voltando agora, deu certo com a ajuda do amigo Daniel Magalhaes Agora vou adaptar pra conseguir colocar o RNDateTimePicker

import React, { useState, useEffect }  from 'react'
import { Button, View, StyleSheet, TextInput } from 'react-native'

export default function Teste(){

    /// VIRÁ DA API - sintaxe à definir
    var ItensMenu = [
        {title: 'Nome', type: 'input', id: 'id1'},
        {title: 'CPF', type: 'number', id: 'id2'},
        {title: 'Data de Nascimento', type: 'date', id: 'id3'},
        {title: 'Data de Cadastro', type: 'date', id: 'id4'},
    ]
    /// VIRÁ DA API

    const [Itens, setItens] = useState([]);

    let ItensForm = []
    
    ItensMenu.map((item) => {
        ItensForm = [...ItensForm, item]
    })

    useEffect(() => { setItens(ItensForm) }, [])

    return(
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
            { 
            Itens.map((item, index) => {
                return(
                    <View key={'view_'+index} style={{flex:1, justifyContent: 'center', alignItems: 'center', width: '100%'}}>
                        <TextInput 
                            value={Itens[index].id} 
                            style={Css.input} 
                            onChangeText={ (value) => {
                                Itens[index].id = value
                                setItens([...Itens], Itens);                                    
                            } }
                        />
                    </View>
                )
            })
            }
            <Button title='press' onPress={ (e) => { console.log(Itens) } } />
            {/* <RNDateTimePicker
                testID="dateTimePicker"
                value={parseISO(date)}
                mode='date'
                is24Hour={true}
                display="default"
                onChange={onChange}
            /> */}
        </View>
    )
}

const Css = StyleSheet.create({
    input:{
        borderWidth: 2,
        width: '100%',
        padding: 5,
        fontSize: 20,
        marginTop: 10,
        marginBottom: 10
    }
})

Esse é o resultado de vários inputs sendo criado a partir de um array da API, e com o uso do DateTimePicker react-native-datetimepicker, era o que eu relamente precisava:

import React, { useState, useEffect }  from 'react'
import { Button, View, StyleSheet, TextInput } from 'react-native'
import RNDateTimePicker from '@react-native-community/datetimepicker';
import { parseISO, format  } from "date-fns";

export default function Teste(){

    /// VIRÁ DA API - sintaxe à definir
    var ItensMenu = [
        {title: 'Nome', type: 'input', id: 'id1'},
        {title: 'CPF', type: 'number', id: 'id2'},
        {title: 'Data de Nascimento', type: 'date', id: 'id3'},
        {title: 'Data de Cadastro', type: 'date', id: 'id4'},
    ]
    /// VIRÁ DA API

    const [Itens, setItens] = useState([]);
    const [showDate, setShowDate] = useState([]);
    const [date, setDate] = useState('2018-04-01 16:00:00');

    let ItensDate = []
    
    ItensMenu.map((item, idx) => {
        
        ItensDate = [...ItensDate, {showDate: false}]
        
    })

    useEffect(() => { 
        setItens(ItensMenu) 
        setShowDate(ItensDate)
    }, [])
    
    return(
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
            { 
            Itens.map((item, index) => {
                return(
                    <View key={'view_'+index} style={{flex:1, justifyContent: 'center', alignItems: 'center', width: '100%'}}>

                        {showDate[index].showDate ? 
                        <RNDateTimePicker
                            // testID="dateTimePicker"
                            value={parseISO(date)}
                            mode='date'
                            is24Hour={true}
                            display="default"
                            onChange={ (e, value) => {
                                    const formattedDate = format(
                                        value, 
                                        "'Dia' dd 'de' MMMM', às ' HH:mm'h'"
                                    );
                                    Itens[index].id = formattedDate;
                                    setItens([...Itens], Itens);
                                    showDate[index].showDate = false;
                                    setShowDate([...showDate], showDate) 
                                }
                                
                            }
                        /> 
                        :
                        null
                        }
                        <TextInput 
                            value={Itens[index].id} 
                            style={Css.input} 
                            onTouchStart={ () => {
                                    showDate[index].showDate = true;
                                    setShowDate([...showDate], showDate) 
                                } 
                            }
                            showSoftInputOnFocus={false}
                            onChangeText={ (value) => {

                                Itens[index].id = value
                                setItens([...Itens], Itens);                             
                                    
                            } }
                        />
                    </View>
                )
            })
            }
            <Button title='press' onPress={ (e) => {

                console.log(Itens)
                
            } } />            
        </View>
    )
}

const Css = StyleSheet.create({
    input:{
        borderWidth: 2,
        width: '100%',
        padding: 5,
        fontSize: 20,
        marginTop: 10,
        marginBottom: 10
    }
})

1 Resposta 1

2

Nesse caso eu usaria o useState para armazenar um objeto com os valores dos inputs, e outro para armazenar o objeto de ItensMenu. Fiz um código de exemplo, fiz uma mistura de inglês com portugês, mas acho que da para entender:


import React, { useState, useEffect } from "react";

export const TextInput = ({ title, type, id, value, onChange, ...props }) => {
  return (
    <div>
      <label htmlFor={id}>{title}</label>
      <input type={type} id={id} name={id} value={value} onChange={onChange} />
    </div>
  );
};

export const FormDinamico = ({ ...props }) => {
  const [itensMenu, setItensMenu] = useState([]);
  const [values, setValues] = useState({});

  //Aqui ficaria sua lógica de requisição para a API
  useEffect(() => {
    let newMenuItens = [
      { title: "Nome", type: "input", id: "id1" },
      { title: "CPF", type: "number", id: "id2" },
      { title: "Data de Nascimento", type: "date", id: "id3" },
      { title: "Data de Cadastro", type: "date", id: "id4" },
    ];
    let initialValues = {};
    newMenuItens.forEach((item) => (initialValues[item.id] = item.value || ""));
    setItensMenu(newMenuItens);
    setValues(initialValues);
  }, []);

  const handleChange = (e) => {
    let id = e.target.id;
    let value = e.target.value;
    setValues((oldValues) => ({ ...oldValues, [id]: value }));
  };

  return (
    <div>
      <form>
        {itensMenu.length &&
          itensMenu.map((item) => (
            <TextInput
              {...item}
              value={values[item.id]}
              onChange={handleChange}
              key={item.id}
            />
          ))}
      </form>
    </div>
  );
};

Não tive como testar o código acima, mas acredito que pode te dar um direcionamento de como fazer.

1
  • Seu código me elucidou muitas coisas, eu trabalho com PHP e T-SQL, agora q estou pegando o jeito no Rect Native, tem muita coisa interessante para programa com esta linguagem, obrigado pela ajuda!!! Meu objetivo é agora adaptar à classe do RNDateTimePicker. Commented 4/09/2020 às 1:02

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 .