diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js index 2a5a600c3df0615fc212f9de9870c4e2bed65bf9..696551c522d3190bb6a1be418976660b94968d03 100644 --- a/src/Components/FormInput.js +++ b/src/Components/FormInput.js @@ -67,8 +67,12 @@ export default function FormInput(props) { type = {props.inputType} value = {props.value} onChange = {props.handleChange} + helperText = {props.help} + rows = {props.rows} + rowsMax = {props.rowsMax} InputProps={{className: classes.input}} style={{width:"100%"}} + multiline = {props.multi} /> </FormContainerStyled> diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js index a82c809c9e92d067e300bdaaf21bc1c558ab39b0..327d1c74b1e8382e0cf53739033905fcd94e26d1 100644 --- a/src/Pages/Contact.js +++ b/src/Pages/Contact.js @@ -19,6 +19,8 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { Component, useState, useEffect } from 'react'; import styled from 'styled-components'; import Banner1 from '../img/banner-sobre.jpg'; +import { TextField } from '@material-ui/core'; +import FormInput from "../Components/FormInput.js" const Seção1 = styled.div ` width: 100%; @@ -147,6 +149,42 @@ const Seção3 = styled.div ` class Contact extends Component { + + constructor (props) { + super(props); + + this.state = { + nome: "", + email: "", + mensagem: "" + }; + this.handleChange = this.handleChange.bind(this); + this.onSubmit = this.onSubmit.bind(this); + }; + + handleChange = e => { + this.setState({[e.target.name]: e.target.value}) + }; + + onSubmit = (e) => { + //on submit we should prevent the page from refreshing + e.preventDefault(); //though this is arguable + + //pass user info to Store.js and clear all text fields + + console.log(this.state); + + + this.setState({ + nome: "", + email: "", + mensagem: "" + }) + + + } + + render() { return( <> @@ -160,35 +198,33 @@ class Contact extends Component { <Formulário> <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2> - <form> - <div className="inputBlock"> - <label htmlFor="nome">Nome *</label> - <input - required - name="nome" - id="nome" - - /> - </div> - <div className="inputBlock"> - <label htmlFor="email">E-mail *</label> - <input - required - name="email" - id="email" - - /> - </div> - <div className="inputBlock Message"> - <label htmlFor="mensagem">Mensagem *</label> - <input - required - nome="mensagem" - id="mensagem" - - /> - </div> - <button type="submit">Enviar Mensagem</button> + <form onSubmit={this.onSubmit}> + <FormInput + inputType={"text"} + name={"nome"} + value={this.state.nome} + placeholder={"Nome *"} + handleChange={e => this.handleChange(e)} + /> + <FormInput + inputType={"text"} + name={"email"} + value={this.state.email} + placeholder={"E-mail *"} + handleChange={e => this.handleChange(e)} + /> + <FormInput + inputType={"text"} + name={"mensagem"} + value={this.state.mensagem} + placeholder={"Mensagem *"} + multi = {true} + rows = "3" + rowsMax = "5" + help="Escreva sua mensagem no campo acima." + handleChange={e => this.handleChange(e)} + /> + <button onClick={e => this.onSubmit(e)} >Enviar Mensagem</button> </form> </Formulário>