Au 09 - Mobile - React Native - Criando funcionalidade para o formulário - Mestres BEGIN

Nesta aula, exploramos como criar componentes de formulário reutilizáveis em React Native, focando na tipagem segura e gestão eficiente de estado.

Tipagem Avançada para Formulários

Utilizamos TypeScript para criar uma tipagem segura para nosso formulário de produtos:

1type IProductForm = Record<keyof Omit<IProduct, "_id">, string>;

Esta abordagem:

Omita a propriedade _id que não precisamos no formulário
Cria um tipo com todas as outras chaves de IProduct
Define todos os valores como string (adequado para inputs)

Gestão de Estado com useState

Configuramos o estado do formulário com valores iniciais:

1const [value, setValue] = useState<IProductForm>(initialForm);

Onde initialForm contém:

1const initialForm: IProductForm = { 
2    name: "", 
3    description: "", 
4    price: "", 
5    // outros campos do produto 
6};

Componente InputText Reutilizável

Criamos um componente genérico com as seguintes props:

1interface InputTextProps { 
2    label: string; 
3    value: string; 
4    onChangeText: (text: string) => void; 
5    placeholder?: string; 
6    secureTextEntry?: boolean; 
7}

Implementação básica:

1const InputText = ({ label, value, onChangeText, placeholder, secureTextEntry = false }: InputTextProps) => ( 
2    <View style={styles.container}> 
3        <Text style={styles.label}>{label}</Text> 
4        <TextInput         style={styles.input}
5         value={value}
6        onChangeText={onChangeText}
7         placeholder={placeholder}
8         secureTextEntry={secureTextEntry} /> 
9    </View> 
10);

Integrando com o Formulário

Como usar o InputText no formulário principal:

1<InputText label="Nome do Produto" value={value.name} onChangeText={(newValue) => { 
2    const copy = {...value}; 
3    copy.name = newValue; 
4    setValue(copy); 
5}} placeholder="Digite o nome do produto" />