인프런 커뮤니티 질문&답변
작성한 질문수
코멘트 작성 부분에서 스타일 추가시 짹짹 버튼이 작동이 안되는 문제..
해결된 질문
작성
·
119
0
import { Button, Form, Input } from 'antd';
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
const CommentForm = ({ post }) => {
const [commentText, setCommentText] = useState('');
const onSubmitComment = useCallback(() => {
console.log(commentText);
}, [commentText]);
const onChangeCommentText = useCallback((e) => {
setCommentText(e.target.value);
}, []);
return (
<Form onFinish={onSubmitComment}>
<Form.Item style={{ position: 'relative', margin: 0 }}>
<Input.TextArea rows={4} value={commentText} onChange={onChangeCommentText} />
<Button style={{ position: 'absolute', right: 0, bottom: -40 }} type="primary" htmlType="submit">삐약</Button>
</Form.Item>
</Form>
);
};
CommentForm.propTypes = {
post: PropTypes.object.isRequired,
};
export default CommentForm;
<Button style={{ position: 'absolute', right: 0, bottom: -40 }} type="primary" htmlType="submit">삐약</Button>
style={{ position: 'absolute', right: 0, bottom: -40 }}
CommentForm.js -> Button 태그 안에 마지막에 추가하신 스타일 부분이 들어가면 짹짹 버튼이 동작을 안하는 것을 확인했는데.
이 부분이 왜 그런것인지 문의 드립니다.
p.s : styled-component 로 적용을 해보아도 동일하게 버튼이 먹통이 됩니다..
답변 1
0
castinglife
질문자
import styled from 'styled-components';
const ButtonWrapper = styled(Button)`
position: absolute;
right: 0px;
bottom: -40px;
z-index: 1;
`;
return (
<Form onFinish={onSubmitComment}>
<Form.Item style={{ position: 'relative', margin: 0 }}>
<Input.TextArea value={commentText} onChange={onChangeCommentText} rows={4} />
<ButtonWrapper type="primary" htmlType="submit">삐약</ButtonWrapper >
</Form.Item>
</Form>
);
또는
return (
<Form onFinish={onSubmitComment}>
<Form.Item style={{ position: 'relative', margin: 0 }}>
<Input.TextArea value={commentText} onChange={onChangeCommentText} rows={4} />
<Button style={{ position: 'absolute', right: 0, bottom: -40, zIndex: 1 }} type="primary" htmlType="submit">삐약</Button> {/* style={{ position: 'absolute', right: 0, bottom: -40 }} */}
</Form.Item>
</Form>
);
z-index: 1;
값을 주니 정상 작동하네요..^^