[React] Component 모듈화 . . 수정중

참고) component 모듈화

onChange를 쓰는데 왜 안되지? placeholder을 썼는데 왜 안되지? 했더니
input 컴포넌트를 모듈화하는 과정에서 props로 컴포넌트를 설정하면서 onchange, type, placeholder등 태그 관련 기능을 defaultProps로 넣어줘야 javascript에서 사용이 가능한 것 같다.

import styled from 'styled-components';
import React from 'react';

const Input = (props) => {
    const {  _onChange, type, placeholder } = props;

    
    return (
        <InputBox type={type} placeholder={placeholder} onChange = { _onChange } ></InputBox>
    );
}
Input.defaultProps = {
    _onChange: () =>{} ,
    placeholder: "text",
    type: "text",
    width: "300px", 
    height: "30px",
    borderRight: "none",
    borderLeft: "none",
    borderTop: "none",
    borderBottom: "1px solid #BE01E5",
    marginBottom: "10px",
    
}
const InputBox = styled.input`
    width: 300px;
    height: 30px;
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: 1px solid #BE01E5;
    margin-bottom: 10px;
`

export default Input;

좋은 웹페이지 즐겨찾기