[구름EDU|처음만난React#9] Forms

---

본 게시글은 구름EDU 처음 만난 React 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

처음 만난 React

처음 만난 React(리액트) - 구름EDU

구름 EDU

구름EDU - 모두를 위한 맞춤형 IT교육

---

Forms
> 양식
> 사용자로부터 입력을 받기 위해 사용
- Controlled Components = Input form Element
- 모든 데이터를 state에서 관리 + setState
>사용자의 입력을 직접적으로 제어할 수 있음!
>Textarea
>Select Tag
>File Input Tag
- Uncontrolled Components
>Multiple Inputs
- ES6 code 고려
>Input Null value

---

Form만들기

{Project Name} / src / Chapter09 / SignUp.js

import React from 'react';

 

class SignUp extends React.Component {

    constructor(props){

        super(props);

 

        this.state={

            name: ''

        }

    }

 

    handleChange = (event) => {

        this.setState({

            [event.target.name] : event.target.value

        });

    }

 

    render() {

        var { name } = this.state;

 

        return(

            <form onSubmit={this.handleSubmit}>

                <label>

                    Name

                    <input

                        type='text'

                        name={'name'}

                        value={name}

                        onChange={this.handleChange}/>

                </label>

                <input type='submit' value='Submit' />

            </form>

        )

    }

}

 

export default SignUp;

{Project Name} / src / index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import SignUp from './Chapter09/SignUp';

 

ReactDOM.render(

  <SignUp/>,

  document.getElementById('root')

);

reportWebVitals();

성별 추가하기

{Project Name} / src / Chapter08 / SignUp.js

import React from 'react';

 

class SignUp extends React.Component {

    constructor(props){

        super(props);

 

        this.state={

            name: '',

            gender: 1,

        }

    }

 

    handleChange = (event) => {

        this.setState({

            [event.target.name] : event.target.value

        });

    }

 

    render() {

        var { name, gender } = this.state;

 

        return(

            <form onSubmit={this.handleSubmit}>

                <label>

                    Name

                    <input

                        type='text'

                        name={'name'}

                        value={name}

                        onChange={this.handleChange}/>

                </label>

                <br />

                <label>

                    Gender

                    <select

                        name={'gender'}

                        value={gender}

                        onChange={this.handleChange}>

                        <option value={1}>Man</option>

                        <option value={0}>Woman</option>

                    </select>

                </label>

                <br />

                <input type='submit' value='Submit' />

            </form>

        )

    }

}

 

export default SignUp;