reactjs中的复选框

Vadym 发表于 Dev

瓦迪姆

我有简单的组件来呈现评论

interface ICommentProps {
  createdAt: string;
  text: string;
  author: IUser;
  replies: IComment[];
  commentRating: number;
}

const Reply: FunctionComponent<ICommentProps> = ({ author, createdAt, text, replies, commentRating }) => (
  <div className={styles.comment}>
    <AdvancedComment createdAt={createdAt} text={text} author={author} commentRating={commentRating} />
    <div className="comments">
      <input type="checkbox" />
      {replies.map(comment => (
        <Reply
          replies={comment.comments}
          author={comment.author}
          createdAt={comment.createdAt}
          text={comment.text}
          commentRating={comment.rating}
        />
      ))}
    </div>
  </div>
);

export default Reply;

我希望当我点击复选框时，下面的代码停止工作：

{replies.map(comment => (
        <Reply
          replies={comment.comments}
          author={comment.author}
          createdAt={comment.createdAt}
          text={comment.text}
          commentRating={comment.rating}
        />
      ))}

我的想法是，当您单击复选框时，子评论将消失。起初我尝试制作动画，但不幸的是它对我不起作用

伊戈尔·兹维亚金

瓦迪姆！您可以使用useState 钩子并禁用目标组件

interface ICommentProps {
  createdAt: string;
  text: string;
  author: IUser;
  replies: IComment[];
  commentRating: number;
}

const Reply: FunctionComponent<ICommentProps> = ({ author, createdAt, text, replies, commentRating }) => {
  const [disabled, setDisabled] = useState(false);
  const onChange = useCallback((e) => {
    setDisabled(e.target.checked); // something like this
  }, [])
  return (
    <div className={styles.comment}>
      <AdvancedComment createdAt={createdAt} text={text} author={author} commentRating={commentRating} />
      <div className="comments">
        <input type="checkbox" checked={disabled} onChange={onChange} />
        {replies.map(comment => (
          <ReplyItem
            disabled={disabled} // <- here
            replies={comment.comments}
            author={comment.author}
            createdAt={comment.createdAt}
            text={comment.text}
            commentRating={comment.rating}
          />
        ))}
      </div>
    </div>
  )
};

export default Reply;

你应该在 ReplyItem 组件中制作动画

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。