Input

Input Event

합성 이벤트(SyntheticEvent) – Reactko.reactjs.org

Input Event는 입력 시 발생하는 이벤트이다. 다음과 같은 종류가 존재한다.

• onChange

• onInput

• onSelect

React에서는 Input Event와 Change Event가 동일하게 처리된다.

React는 많은 사람들이 쓰지만 웹 표준은 아니며, 이 부분에 대해서는 명확한 문서를 찾을 수 없었다.

https://github.com/facebook/react/issues/3964

문서에서는 onChange로 입력을 처리하도록 코드를 작성한다.

onChange

예제 - 입력한 글자 수를 알려주는 페이지

class MainComponent extends React.Component {
    state = {
        text : "",
    };
    setText = (e)=>{
        this.setState({
            text:e.target.value
        });
    };
    render(){
        const {text} = this.state;
        return (
            <>
                <input type="text" onChange={this.setText}/>
                <hr/>
                <span>입력 글자 수 : {text.length}</span>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);

예제 - 회원 정보 입력

class MainComponent extends React.Component {
    state = {
        memberId:"",
        memberNick:"",
        memberPhone:"",
    };
    setValue = (e)=>{
        this.setState({
            [e.target.name]:e.target.value
        });
    };
    render(){
        const {memberId, memberNick, memberPhone} = this.state;
        return (
            <>
                아이디 : <input type="text" name="memberId" onInput={this.setValue}/><br/>
                닉네임 : <input type="text" name="memberNick" onInput={this.setValue}/><br/>
                전화번호 : <input type="text" name="memberPhone" onInput={this.setValue}/><br/>
                <hr/>
                <div>입력된 아이디 : {memberId}</div>
                <div>입력된 닉네임 : {memberNick}</div>
                <div>입력된 전화번호 : {memberPhone}</div>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);