mui 자동하이픈기능 text창

componet는 PhoneNumber.js이다.

PhoneNumber.js

export default function FormattedInputs() {

  const { getPhoneNumber, getReservationDay } = useContext(GetInformation);  
  
  const [values, setValues] = React.useState({
    textmask: '',    
  });
  
  const handleChange = (event) => {
    setValues({
      ...values,
      [event.target.name]: event.target.value,
    });
    getPhoneNumber(values.textmask);
  };

  return (
    <Box
      sx={{'& > :not(style)': {m: 1,},}}>  

      <FormControl variant="standard">
        <InputLabel htmlFor="formatted-text-mask-input">phone number</InputLabel>
        <Input          
          onChange={handleChange}
          value={values.textmask} //여기로 전화번호 값이 들어온다.
          name="textmask"
          id="formatted-text-mask-input"
          inputComponent={TextMaskCustom}
        />
      </FormControl>
    </Box>
  );
}

나는 value값을 PhoneNumber.js의 상위컴포넌트인 Reservation.js로 전달할 생각이다.

순서

1. 상위컴포넌트인 Reservation.js에서 value값을 담을 그릇?인 getPhoneNumber()를 보낸다.
2. PhoneNumber.js에서 값이 바뀔때마다 value값을 바꿔주는 handleChange 함수에 getPhoneNumber()를 넣는다.
3. 바뀐 value값을 getPhoneNumber()의 매개변수로 넣어준다.

Reservation.js

import React, {useState} from "react";

const [phoneNumber, setphoneNumber] = useState();

const getPhoneNumber = (number) => {
      setphoneNumber(number);
    }

• Reservation.js에 전화번호의 값을 저장해놓을 phoneNumber를 useState를 통해서 만든다.

• getPhoneNumber(number)는 PhoneNumber.js에서 받은 전화번호를 매개변수로 받은뒤에 setphoneNumber()를 통해서 phoneNumber를 업데이트 시킨다.

Reservation.js

import React, {useContext} from "react";

export const GetInformation = React.createContext();

<GetInformation.Provider value={getPhoneNumber}>
  <PhoneNumber />
</GetInformation.Provider>                                       

• useContext를 이용하여 getPhoneNumber()를 하위 컴포넌트인 PhoneNumber으로 전달한다.

PhoneNumber.js

import { useContext, useState } from 'react';

import {GetInformation} from '../pages/Reservation';

const { getPhoneNumber } = useContext(GetInformation); 

const [value, setValues] = React.useState();  
  
const handleChange = (event) => {
  setValues(event.target.value);          
  getPhoneNumber(value);
};

return (   
      <FormControl variant="standard">
        <InputLabel htmlFor="formatted-text-mask-input">phone number</InputLabel>
        <Input          
          onChange={handleChange}
          value={value}
          name="textmask"
          id="formatted-text-mask-input"
          inputComponent={TextMaskCustom}
        />
      </FormControl>
    </Box>
  );
}

• onChange에 handleChange을 넣어준다.
• handleChange는 입력받은 전화번호를 계속해서 업데이트 시켜준다.(업데이트 된 전화번호 => value)
• handleChange()안에 Reservation.js에서 받아온 getPhoneNumber()를 넣어준다.
• getPhoneNumber(value)를 넣어서 업데이트된 전화번호를 Reservation.js에 전달한다.