Nextjs:星级

Question

在这里，我有一个问题，当我想点击明星评级。

这是当星等仍然是空的或者还没有被点击时的情况。

​

所以，我想当用户点击1次星星，那么星星将被填充一半。当用户点击2次星号时，它将被完全填充。

然而，当我尝试点击1次时，所有的星星都被填满了，也不是半颗星。。

​

​

我的期望是这样的当点击1次

​

​

因此问题是，如何使条件，用户点击1次，星星将填补它的一颗星，而如果用户点击2次，星星它将填补全部。谢谢

我的守则：

import { useState } from "react";
import styles from "./ModalFeedback.module.scss";

import useModal from "../../utils/useModal";
// import { AiOutlineStar, AiFillStar } from "react-icons/ai";
import { BsStar, BsStarHalf, BsStarFill } from "react-icons/bs";
import { createFeedback } from "../../utils/api/feedbackApi";

import ModalContainer from "./ModalContainer";
import Input from "../global/input/TextInput";
import { ButtonContainer, Button } from "../global/Button";
import { toast } from "react-toastify";

const ModalFeedback = () => {
    const [input, setInput] = useState({ message: "", rating: 0 });
    const [isLoading, setLoading] = useState(false);
    const { modal, setModal } = useModal("send-feedback");

    const submitHandler = () => {
        setLoading(true);
        createFeedback(input)
            .then((resolve) => {
                console.log(resolve);
                toast.info("Send feedback success.");
                setModal(false);
            })
            .catch((reject) => {
                console.log(reject);
                toast.error(reject);
            })
            .finally(() => {
                setLoading(false);
            });
    };

    return (
        <ModalContainer
            show={modal}
            isLoading={isLoading}
            customContainer={{ padding: "1.5rem 1.875rem" }}
            onClose={() => {
                setInput({ message: "", rating: 0 });
            }}
        >
            <h5 className={styles.title}>Feedback</h5>
            <div className={styles.rating}>
                {Array.from({ length: 5 }, (_, index) => {
                    if (index + 1 <= input.rating) {
                        return <BsStarFill onClick={() => setInput({ ...input, rating: index + 1 })} key={index} />;
                    } 
                    if (index + 0.5 <= input.rating) {
                        return <BsStarHalf onClick={() => setInput({ ...input, rating: index + 1 })} key={index} />;
                    }
                    else {
                        return <BsStar onClick={() => setInput({ ...input, rating: index + 1 })} key={index} />;
                    }
                })}
            </div>
            <Input label="Message">
                <textarea
                    className={styles.input}
                    rows={4}
                    placeholder="Fill in your feedback for us.."
                    value={input.message}
                    onChange={(e) => {
                        setInput({ ...input, message: e.target.value.substring(0, 250) });
                    }}
                />
            </Input>
            <p className={styles.info}>{input.message.length}/250 max characters</p>
            <ButtonContainer style={{ width: "24rem", gap: "1.5rem" }}>
                <Button style={{ flex: 1 }} isTransparent onClick={() => setModal(false)}>
                    Later
                </Button>
                <Button style={{ flex: 1 }} onClick={submitHandler} isDisabled={!input.rating} isLoading={isLoading}>
                    Send Feedback
                </Button>
            </ButtonContainer>
        </ModalContainer>
    );
};

export default ModalFeedback;

Answer 1

根据您的情况，您必须在空星图图标的onclick事件中添加0.5。

 <>
      {Array.from({ length: 5 }, (_, index) => {
        console.log(index, input.rating, "sms");
        if (index + 1 <= input.rating) {
          return (
            <BsStarFill
              onClick={() => setInput({ ...input, rating: index + 1 })}
              key={index}
            />
          );
        }
        if (index + 0.5 <= input.rating) {
          return (
            <BsStarHalf
              onClick={() => setInput({ ...input, rating: index + 1 })}
              key={index}
            />
          );
        } else {
          return (
            <BsStar
              // adding 0.5 instead of 1
              onClick={() => setInput({ ...input, rating: index + 0.5 })}
              key={index}
            />
          );
        }
      })}
    </>