// file: src/App.js
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
class App extends Component {
handleCreate = (data) => {
console.log(data);
}
render() {
return (
<div>
<PhoneForm
onCreate={this.handleCreate}
/>
</div>
);
}
}
export default App;
- 콘솔에 부모로부터 받은 props
- 자식컴포넌트
// file: src/components/PhoneForm.js
import React, { Component } from 'react';
class PhoneForm extends Component {
state = {
name: '',
phone: ''
//뷰 자식들
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
//Computed property names
})
}
handleSubmit = (e) => {
// 페이지 리로딩 방지
e.preventDefault();
// 상태값을 onCreate 를 통하여 부모에게 전달
this.props.onCreate(this.state);
// 상태 초기화
this.setState({
name: '',
phone: ''
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
placeholder="이름"
// hint
value={this.state.name}
// 들어가는 text값
onChange={this.handleChange}
// Computed property names
name="name"
// id
/>
<input
placeholder="전화번호"
value={this.state.phone}
onChange={this.handleChange}
name="phone"
/>
<button type="submit">등록</button>
</form>
);
}
}
export default PhoneForm;
-부모 컴포넌트
'Web > Script' 카테고리의 다른 글
리액트 불변성 (0) | 2019.07.03 |
---|---|
자바스크립트 람다식 (0) | 2019.07.03 |
Computed property (0) | 2019.07.03 |
LifeCycle (0) | 2019.07.03 |
React 컴포넌트의 결합 props 와 state (0) | 2019.07.03 |