React에서 양식을 만드는 방법? - 제어 입력 및 재질 UI
31386 단어 htmlreactjavascriptcss
그럼 코딩을 시작해 볼까요?
데모 비디오
Source Code
프로젝트 구조
새로운 반응 앱 만들기
npx create-react-app react-forms
cd react-forms
npm start
material-ui/core 패키지를 사용하고 있습니다. 선택 사항입니다. 나와 함께 따라하고 싶다면 이 명령으로 이 패키지를 설치하십시오.
npm install @material-ui/core
App.css
.App {
width: 100vw;
height: 100vh;
background-color: #f5f5f5;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.column {
flex-direction: column;
}
.form {
display: flex;
flex-direction: column;
width: 350px;
padding: 10px;
}
.input {
width: 100% !important;
margin: 5px 0 !important;
}
textInput 구성 요소 만들기
/src/components/common/textInput.js
import TextField from "@material-ui/core/TextField";
const TextInput = ({ ...rest }) => {
return (
<TextField
variant="outlined"
size="small"
className="input"
{...rest}
/>
);
};
export default TextInput;
...rest = 당신은 단순히 당신의 props 객체에 정의된 나머지 속성을 rest라는 새로운 인수로 가져오는 것입니다.
selectInput 구성 요소 만들기
/src/components/common/selectInput.js
import TextField from "@material-ui/core/TextField";
const SelectInput = ({ options, ...rest }) => {
return (
<TextField
variant="outlined"
size="small"
className="input"
select
{...rest}
SelectProps={{ native: true }}
>
<option defaultValue="" style={{ display: "none" }}></option>
{options.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</TextField>
);
};
export default SelectInput;
radioInput 구성 요소 만들기
/src/components/common/radioInput.js
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
const RadioInput = ({ label, options, required, ...rest }) => {
return (
<div style={{ justifyContent: "space-between" }} className="flex input">
<FormLabel component="legend">{label}</FormLabel>
<RadioGroup {...rest} row>
{options.map((option) => (
<FormControlLabel
value={option}
control={<Radio color="primary" required={required} />}
label={option}
key={option}
/>
))}
</RadioGroup>
</div>
);
};
export default RadioInput;
양식 구성 요소 만들기
/src/components/common/form.js
import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import TextInput from "./textInput";
import RadioInput from "./radioInput";
import SelectInput from "./selectInput";
class Form extends Component {
state = { data: {} };
handleChange = ({ currentTarget: input }) => {
const data = { ...this.state.data };
data[input.name] = input.value;
this.setState({ data });
};
handleSubmit = (event) => {
event.preventDefault();
this.doSubmit();
};
renderTextInput(name, label, type = "text", required = true) {
const { data } = this.state;
return (
<TextInput
name={name}
value={data[name]}
type={type}
required={required}
label={label}
onChange={this.handleChange}
/>
);
}
renderRadioInput(name, label, options, required = true) {
const { data } = this.state;
return (
<RadioInput
name={name}
value={data[name]}
onChange={this.handleChange}
label={label}
options={options}
required={required}
/>
);
}
renderSelectInput(name, label, options, required = true) {
const { data } = this.state;
return (
<SelectInput
name={name}
value={data[name]}
options={options}
label={label}
required={required}
onChange={this.handleChange}
/>
);
}
renderSubmitBtn(name) {
return (
<Button
type="submit"
style={{ marginLeft: "auto" }}
variant="contained"
size="medium"
color="primary"
>
{name}
</Button>
);
}
}
export default Form;
프로필 구성 요소 만들기
/src/components/profile.js
import React from "react";
import Form from "./common/form";
import Card from "@material-ui/core/Card";
class Profile extends Form {
state = {
data: { name: "", email: "", status: "", gender: "" },
};
doSubmit = () => {
console.log(this.state.data);
};
render() {
return (
<div className="flex column">
<h1>Profile</h1>
<form onSubmit={this.handleSubmit}>
<Card className="form">
{this.renderTextInput("name", "Name")}
{this.renderTextInput("email", "Email", "email")}
{this.renderSelectInput("status", "Marital Status", [
"Single",
"Married",
"Divorced",
"Widowed",
])}
{this.renderRadioInput("gender", "Gender", [
"Male",
"Female",
"Other",
])}
{this.renderSubmitBtn("Submit")}
</Card>
</form>
</div>
);
}
}
export default Profile;
App.js
import Profile from "./components/profile";
import "./App.css";
function App() {
return (
<div className="App flex">
<Profile />
</div>
);
}
export default App;
그것이 브라우저에서 양식을 테스트하는 것입니다. 실수를 발견하거나 더 나은 코드를 만들면 댓글로 알려주십시오. 더 나은 이해를 위해 Youtube 비디오를 시청하십시오. 매주 더 많은 지식 콘텐츠를 얻으려면 내 YouTube 채널을 구독하십시오.
아리가토 고자이마스.. 🙂
Reference
이 문제에 관하여(React에서 양식을 만드는 방법? - 제어 입력 및 재질 UI), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cyberwolve/how-to-build-forms-reusable-inputs-in-react-19g7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)