React에서 양식을 만드는 방법? - 제어 입력 및 재질 UI

안녕하세요 여러분, 오늘 우리는 사용자로부터 입력을 받고 콘솔에 데이터를 기록하는 간단한 양식을 만들 것입니다. 재사용 가능한 입력을 구축하여 코드를 깔끔하고 보기 좋게 만들고 양식을 쉽게 작성할 수 있습니다.

그럼 코딩을 시작해 볼까요?

데모 비디오

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 채널을 구독하십시오.

아리가토 고자이마스.. 🙂