여러가지 Tag

SSO·2022년 1월 30일

react_groom

목록 보기

5/6

2021/01/13

1. Form tag

: 해서 그대로 양식이라는 의미.

React에서는??

→ controlled component!! : 값이 React의 통제를 받는 input form element

사용자의 입력을 직접 제어할 수 있다!

Example

→ 사용자의 입력을 대문자로 변경하고 싶다면 handleChange 함수에서 toUpperCase 메서드를 사용해 한번에 통제(처리)할 수 있다!

2. Select tag

: 다수의 옵션 중 하나를 선택할 수 있는 태그.

html에서는 selected를 사용해서 선택.

react에서는 value값을 가져와 사용한다. 또한 multiple을 사용해 다수의 옵션도 선택이 가능하다.

<select multiple={true} value={['B', 'C']}>

3. Textarea tag

: 여러 줄에 거친 긴 문자열을 처리할 때 사용하는 태그

4. FileInput tag

: read-only 속성으로 uncontrolled component이다.

Example

//form, select, input 태그 모두 사용 
//사용자 정보 입력
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.handleChange}>
                <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>
                <input type='submit' value='Submit' />
            </form>
        )
    }
}

export default SignUp;