[React][Inflearn] 9. Forms

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;