4. event handler
사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것
- onmouseover (hover)
- onclick
- onchange ( form)
주의점
- 카멜 표기법으로!
- onClick ..
- 이벤트에 실행할 함수 형태의 값을 전달한다.
- 컴포넌트 자체에는 이벤트 생성 불가
<div>
같은 DOM 요소에만 이벤트 설정 가능<MyComponent onClick={doSomething}/>
<div onClick={this.props.onClick}>
처럼 props로 보내주면 설정은 가능
이벤트 생성
import React,{Component} from "react";
class EventPractice extends Component{
render(){
return(
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={
(event)=> {console.log(event)}
}
/>
</div>
)
}
}
export default EventPractice
onChange
import React,{Component} from "react";
class EventPractice extends Component{
render(){
return(
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={
(event)=> {console.log(event)}
}
/>
</div>
)
}
}
export default EventPractice
onChange={ (event)=> {console.log(event)}}
→ 이벤트 함수는 함수형으로 작성이 되어야 한다.
→ 우리가 적는 값은 event.target.value
에 있다
state에 input 값 담기
state={val : ""}
⇒ state 초깃값 설정
onChange= {()⇒ {this.setState ({val: event.target.value}) }}
⇒ SetState로 state값 바꿔주기
onClick
<button
onClick={()=>{
alert(this.state.message)
this.setState({message:''})
}
}>빈값만들기</button>
<button
onClick={()=>{
alert(this.state.message)
this.setState({message:''})
}
}>빈값만들기</button>
사용 방법은 동일하다
임의 메서드 만들기
이벤트 내용이 태그 안에 적혀 있으면 복잡해서 함수를 미리 준비하여 전달
가독성이 높아진다.
state ={..}
constructor(props){
super(props)
this.handleChange = this.handleChange.bind(this)
this.hancleClick = this.handleClick.bind(this)
}
handleChange(e){
this.setState({
message:e.target.value
})
}
handleClick(){
alert(this.state.message)
this.setState({
message:""
})
}
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={this.handleChange}
value={this.state.message} />
<button onClick={this.handleClick}>
- props로 함수를 등록한다
-
임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 가리키기 위해
메서드를 this와 바인딩 하는 작업이 필요하다 . → 안하면 this = undefined
-
- 이벤트핸들러에서 사용할 때 .
this.함수명
으로 사용한다.
constructor 안쓰기
handleChange = (e)=>{
this.setState({
message:e.target.value
})
}
handleChange = (e)=>{
this.setState({
message:e.target.value
})
}
함수 내용만 arrow function으로 사용하면 constructor 없이도 사용가능하다
input 여러개 다루기
[e.target.name]
state={
username :"",
message : "기본값",
fix :'고정'
}
handleChange = (e)=>{
console.log(e.target)
this.setState({
[e.target.name]:e.target.value
})
}
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={this.handleChange}
value={this.state.message}
/>
state={
username :"",
message : "기본값",
fix :'고정'
}
handleChange = (e)=>{
console.log(e.target)
this.setState({
[e.target.name]:e.target.value
})
}
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={this.handleChange}
value={this.state.message}
/>
handleChange
함수에서 setState
의 내용이 중요하다
this.setState{[e.target.name] : e.target.value}
- 해당 인풋의 name 을 나타낸다
- 객체 안에서 key를
[ ]
로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key로 사용
결과 : { "헤이헤이" : "value"}const name = "헤이헤이" const object = { [name]:'value'}
onKeyPress
enter
를 누르는 등의 이벤트를 처리
handleKeyPress= (e)=>{
if (e.key ==="Enter"){
this.handleClick()
}
}
함수 컴포넌트로 구현하기
import React, {useState} from "react";
const EventPractice = () =>{
const [username,setUsername] = useState('')
const [message,setMessage] = useState('')
const onChangeUsername = e => setUsername(e.target.value)
const onChangeMessage = e => setMessage(e.target.value)
const onClick = () =>{
alert(username+":"+message)
setMessage('')
setUsername('')
};
const onKeyPress = (e) =>{
if (e.key==="Enter"){
onClick()
}
}
return (<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={username}
onChange={onChangeUsername}
/>
<div className="inputprac">
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={onChangeMessage}
onKeyPress={onKeyPress}
value={message}
/>
<p>{username}</p>
<p>{message}</p>
</div>
<button
onClick={onClick}
>확인</button>
</div>)
}
export default EventPractice
object를 state로 사용하기
const [form,setForm] = useState({
username:'',
message:''
});
const {username,message} = form
const onChange = e=> {
const nextForm = {
...form,
[e.target.name]:e.target.value
};
setForm(nextForm)
}
const onClick = () =>{
alert(username+":"+message)
setForm({
username:'',
message:"",
})
};
import React, {useState} from "react";
const EventPractice = () =>{
const [username,setUsername] = useState('')
const [message,setMessage] = useState('')
const onChangeUsername = e => setUsername(e.target.value)
const onChangeMessage = e => setMessage(e.target.value)
const onClick = () =>{
alert(username+":"+message)
setMessage('')
setUsername('')
};
const onKeyPress = (e) =>{
if (e.key==="Enter"){
onClick()
}
}
return (<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={username}
onChange={onChangeUsername}
/>
<div className="inputprac">
<input
type="text"
name="message"
placeholder="입력하세요"
onChange={onChangeMessage}
onKeyPress={onKeyPress}
value={message}
/>
<p>{username}</p>
<p>{message}</p>
</div>
<button
onClick={onClick}
>확인</button>
</div>)
}
export default EventPractice
const [form,setForm] = useState({
username:'',
message:''
});
const {username,message} = form
const onChange = e=> {
const nextForm = {
...form,
[e.target.name]:e.target.value
};
setForm(nextForm)
}
const onClick = () =>{
alert(username+":"+message)
setForm({
username:'',
message:"",
})
};
const [form,setForm] = useState({오브젝트 내용})
const {username,message} = form
등록 후 사용하기
const nextForm = { ...form , [e.target.name] : e.target.value}
→ form을 복사해서 새로운 값 만들고, 내용 수정하기
setForm(nextForm)
새 복사본으로 form 수정하기
Author And Source
이 문제에 관하여(4. event handler), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bbnerino/4.-event-handler저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)