import React, { Component } from "react";
/**
* Challenge: Wire up the partially-finished travel form so that it works!
* Remember to use the concept of controlled forms
* https://reactjs.org/docs/forms.html
*
* All information should be populating the text below the form in real-time
* as you're filling it out
*
* This exercise is adapted from the V School curriculum on vanilla JS forms:
* https://coursework.vschool.io/travel-form/
*
* All of our challenges and learning resources are open for the public
* to play around with and learn from at https://coursework.vschool.io
*/
class App extends Component {
constructor() {
super();
this.state = {
firstName: "",
lastName: "",
age: "",
gender: "",
destination: "",
isVegan: false,
isKosher: false,
isLactoseFree: false,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const { name, value, type, checked } = event.target;
type === "checkbox"
? this.setState({
[name]: checked,
})
: this.setState({
[name]: value,
});
}
render() {
return (
<main>
<form>
<input
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
placeholder="First Name"
/>
<br />
<input
name="lastName"
value={this.state.lastName}
onChange={this.handleChange}
placeholder="Last Name"
/>
<br />
<input
name="age"
value={this.state.age}
onChange={this.handleChange}
placeholder="Age"
/>
<br />
<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === "female"}
onChange={this.handleChange}
/>{" "}
Male
</label>
{/* Create radio buttons for gender here */}
<br />
<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === "female"}
onChange={this.handleChange}
/>{" "}
Female
</label>
{/* Create select box for location here */}
<br />
<select
value={this.state.destination}
name="destination"
onChange={this.handleChange}
>
<option value="">-- Please Choose a destination--</option>
<option value="germany">Germany</option>
<option value="norway">Norway</option>
<option value="north pole">North Pole</option>
<option value="south pole">South Pole</option>
</select>
{/* Create check boxes for dietary restrictions here */}
<br />
<label>
<input
type="checkbox"
name="isVegan"
onChange={this.handleChange}
checked={this.state.isVegan}
/>{" "}
Vegan?
</label>
<br />
<label>
<input
type="checkbox"
name="isKosher"
onChange={this.handleChange}
checked={this.state.isKosher}
/>{" "}
Kosher?
</label>
<br />
<label>
<input
type="checkbox"
name="isLactoseFree"
onChange={this.handleChange}
checked={this.state.isLactoseFree}
/>{" "}
Lactose Free?
</label>
<br />
<button>Submit</button>
</form>
<hr />
<h2>Entered information:</h2>
<p>Your name: {this.state.firstName}</p>
<p>Your age: {this.state.age}</p>
<p>Your gender: {this.state.gender /* Gender here */}</p>
<p>Your destination: {this.state.destination /* Destination here */}</p>
<p>Your dietary restrictions:</p>
{/* Dietary restrictions here, comma separated */}
<p>Vegan: {this.state.isVegan ? "Yes" : "No"}</p>
<p>Kosher: {this.state.isKosher ? "Yes" : "No"}</p>
<p>Lactose Free: {this.state.isLactoseFree ? "Yes" : "No"}</p>
</main>
);
}
}
export default App;
여태까지 만든걸 구조분해 할당을 해야하는데 어떻게 해야하지?
FormContainer
import React, { Component } from "react";
import FormComponent from "./FormComponent";
class Form extends Component {
constructor() {
super();
this.state = {
firstName: "",
lastName: "",
age: "",
gender: "",
destination: "",
isVegan: false,
isKosher: false,
isLactoseFree: false,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const { name, value, type, checked } = event.target;
type === "checkbox"
? this.setState({
[name]: checked,
})
: this.setState({
[name]: value,
});
}
render() {
return <FormComponent handleChange={this.handleChange} data={this.state} />;
}
}
export default Form;
위에는 비지니스 로직을 만들어주고 아래에는 rendering되는 것들을 만들어 준다.
props.data로 상속을 해주는게 신기하다.
FormComponent
import React from "react";
function FormComponent(props) {
return (
<main>
<form>
<input
name="firstName"
value={props.data.firstName}
onChange={props.handleChange}
placeholder="First Name"
/>
<br />
<input
name="lastName"
value={props.data.lastName}
onChange={props.handleChange}
placeholder="Last Name"
/>
<br />
<input
name="age"
value={props.data.age}
onChange={props.handleChange}
placeholder="Age"
/>
<br />
<label>
<input
type="radio"
name="gender"
value="male"
checked={props.data.gender === "male"}
onChange={props.handleChange}
/>{" "}
Male
</label>
<br />
<label>
<input
type="radio"
name="gender"
value="female"
checked={props.data.gender === "female"}
onChange={props.handleChange}
/>{" "}
Female
</label>
<br />
<select
value={props.data.destination}
name="destination"
onChange={props.handleChange}
>
<option value="">-- Please Choose a destination --</option>
<option value="germany">Germany</option>
<option value="norway">Norway</option>
<option value="north pole">North Pole</option>
<option value="south pole">South Pole</option>
</select>
<br />
<label>
<input
type="checkbox"
name="isVegan"
onChange={props.handleChange}
checked={props.data.isVegan}
/>{" "}
Vegan?
</label>
<br />
<label>
<input
type="checkbox"
name="isKosher"
onChange={props.handleChange}
checked={props.data.isKosher}
/>{" "}
Kosher?
</label>
<br />
<label>
<input
type="checkbox"
name="isLactoseFree"
onChange={props.handleChange}
checked={props.data.isLactoseFree}
/>{" "}
Lactose Free?
</label>
<br />
<button>Submit</button>
</form>
<hr />
<h2>Entered information:</h2>
<p>
Your name: {props.data.firstName} {props.data.lastName}
</p>
<p>Your age: {props.data.age}</p>
<p>Your gender: {props.data.gender}</p>
<p>Your destination: {props.data.destination}</p>
<p>Your dietary restrictions:</p>
<p>Vegan: {props.data.isVegan ? "Yes" : "No"}</p>
<p>Kosher: {props.data.isKosher ? "Yes" : "No"}</p>
<p>Lactose Free: {props.data.isLactoseFree ? "Yes" : "No"}</p>
</main>
);
}
export default FormComponent;
임지택입니다.