[FrontEnd]로그인 폼 submit!

import React, { Component } from "react";

import LoginForm from "./presenter";

class Container extends Component{

state = {

username : "",

password : ""

};

render() {

const {username, password} = this.state;

return <LoginForm

handleInputChange={this._handleInputChange}

handleSubmit={this._handleSubmit}

usernameVlaue={username}

passwordValue={password}

/>;

}

_handleInputChange = event => {

//console.log(event.target.value)

const {target : {value,name} } = event;

this.setState({

[name] : value //[]는 변수 선언이 아니라 변수 자체를 불러오는 것(username,password)

});

console.log(this.state)

};

_handleSubmit = event => {

event.preventDefault();

// redux will be here

}

}

export default Container;

컨테이너

일단 컨테이너 컴포넌트를 만들었다.

그리고 state에 username 과 password를 비워뒀다.

렌더에서

위의 state들을 가져오고

<LoginForm />컴포넌트를 가져온다.

그리고 이 폼에는 username과 password, handleInputChange, handleSubmit와 같은 속성을 받을 것이다.

handleInputChange를 살펴보면

event를 파라미터로 받는 함수이고,

const {target : {value,name} } = event;

이것은 value 혹은 name을

const value = event.target.value

const name = event.target.value

선언하는것 ㄷㄷ;;

setState를 통해서 state를 다시 렌더링 한다.

다시 렌더링 할 것은

<input태그의 [name]>

여기서

name과 [name]의 차이점은

name = value는 name이라는 변수를 선언하고 할당 하는 것이고

[name]은

username = value,

password = value

로 입력되어 진다.

handlesubmit은

일단 이벤트 발생시에

preventDeaflut를 통해서 새로고침화 하는것을 멈춘 상태이다(Default는 submit후 새로고침)

<form className={styles.form} onSubmit={props.handleSubmit}>

<input

type="text"

placeholder={context.t("Username")}

className={styles.textInput}

value={props.usernameValue}

onChange = {props.handleInputChange}

name="username"

/>

<input

type="password"

placeholder={context.t("Password")}

className={styles.textInput}

value={props.passwordValue}

onChange = {props.handleInputChange}

name="password"

/>

프리젠트

value값과 함수는 props를 통해서 전달받음

name을 선언해서 username과 password가 각각 value로 렌더링됨