기본 form -react-

React 기본 form 형식

ref 이용해야 한다.

class HabitAddForm extends Component {
    inputRef = React.createRef();

    onSubmit = (event) => {
        event.preventDefault();

        console.log(this.inputRef.current.value);
        
    };


    render() {
        return (
            <form className="add-form" onSubmit={this.onSubmit}>
                <input 
                ref={this.inputRef}
                type="text" 
                className="add-input" 
                placeholder="write habit.." 
                />
                <button className="add-button">추가</button>
                
            </form>
        );
    }
}

export default HabitAddForm;

로직

form 에서 버튼이 눌러지면 submit 이벤트 발생
form 태그의 onSubmit 속성을 이용한다.
전역변수를 이용해 함수를 설정한다.
event.preventDefault()를 이용해 브라우저의 기본 기능을 없앤다
(기본적으로 submit 이벤트가 발생하면 리로드 발생한다)

input 태그의 ref 속성값을 이용한다
(리액트에서 다른 요소로 접근을 하는 경우에는 Ref를 이용해야 한다 )