• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

commenttForm submit 버튼 작동 에러

21.10.06 17:26 작성 조회수 105

0

import { Form, Input, Button } from "antd";
import React, { useCallback, useState } from "react";
import useInput from "../hooks/useInput";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";

const CommentForm = ({ post }) => {
const id = useSelector((state) => state.user.me?.id);
const [commentText, onChangeCommentText] = useInput("");
const onSubmitComment = useCallback(() => {
console.log(post.id, commentText);
}, [commentText]);

return (
<Form onFinish={onSubmitComment}>
<Form.Item style={{ position: "relative", margin: 0 }}>
<Input.TextArea
value={commentText}
onChange={onChangeCommentText}
rows={4}
/>
<Button
type="primary"
htmlType="submit"
style={{ position: "absolute", right: 0 }}
>
삐약
</Button>
</Form.Item>
</Form>
);
};

CommentForm.propTypes = {
post: PropTypes.object.isRequired,
};

export default CommentForm;

 

문제

button에 style객체 추가 이후 console.log가 찍히지 않는 현상

 

style={{ position: "absolute", right: 0 }}

여기까지 쳤을 때는 작동을 하였으나 

style={{ position: "absolute", right: 0, bottom: -40 }}

bottom -40 을 추가하면 작동 안함

bottom 0 은 작동이 잘되는 것을 보니 마이너스 추가시 문제가 방생하는 것 같음

 

왜 그럴까요?ㅠㅠ

 

 

 

 

 

 

답변 1

답변을 작성해보세요.

1

버튼이 다른 요소(투명일 수도 있음)에 의해 가려지는 것 아닐까요? zIndex도 높게 줘보세요.