LWC - 2 (간단한 입력 받기)

LWC에서 사용자에게 간단한 입력을 받을 수 있는 컴포넌트를 만들어보자.

 

1. html 파일

 

<template>
    <template if:true={show}>
        <lightning-card title="Employee Information">
            <div class="slds-n-around_medium">
                <lightning-input label="Enter Name" value={name} onchange={nameHandler}></lightning-input>
                <lightning-input label="Enter Age" value={age} onchange={ageHandler}></lightning-input>
                <lightning-input label="Enter Salary" value={salary} onchange={salaryHandler}></lightning-input>
                <lightning-button label="Save" onclick={saveButtonHandler}></lightning-button>
            </div>
        </lightning-card>
    </template>
    <template if:false={show}>
        <lightning-card title="Employee Detail">
            <div class="slds-n-around_medium">
                <p>Employee Name : {name}</p>
                <p>Employee Age : {age}</p>
                <p>Employee Salary : {salary}</p>
            </div>
        </lightning-card>
    </template>
</template>

 

2. js 파일

 

import { LightningElement, track } from 'lwc';

export default class EmployeeInfo extends LightningElement {
    @track name;
    @track age;
    @track salary;
    @track show = true;

    nameHandler(event){
        this.name = event.target.value;
    }
    ageHandler(event){
        this.age = event.target.value;
    }
    salaryHandler(event){
        this.salary = event.target.value;
    }
    saveButtonHandler(){
        this.show = false;
    }
}

 

3. xml

 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>