javascript - 让星星排列 CSS

问题描述

我有一个用于评分的组件，我决定使用 FA 图标通过使用半星来完成这项工作。除了 CSS 之外，每一个都很好。我已经成功地翻转了一些星星（FA 图标只在一侧），所以星星正确对齐，它们只是不接触。我只需要一些关于处理它的最简单方法的建议。

评分者.js

import React, { useState } from 'react'
import {FaStarHalf} from "react-icons/all";
import './Rater.css'


const Rater = () => {
    const [rating, setRating] = useState(null);
    const [hover, setHover] = useState(null);
    const [value] = useState(100);
    const [iconValue, setIconValue] = useState(5);

    return (
        <div>
            <select
                onChange={e => {
                    setIconValue(Number(e.target.value));
                }}
            >
                {Array.from(new Array(value), (value, index) => index + 1).map(
                    value => (
                        <option key={value} value={value}>
                            {value}
                        </option>
                    )
                )}
            </select>
            <h1> Select Amount of Icons </h1>

            {[...Array(iconValue), ...Array(iconValue)].map((icon, i) => {
                const value = i + 1;

                return (
                    <label>
                        <input
                            type="radio"
                            name="rating"
                            value={value}
                            onClick={() => setRating(value)}
                        />
                        <FaStarHalf
                            className={i % 2 ? "star-left" : "star"}
                            color={value <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
                            size={100}
                            onMouseEnter={() => setHover(value)}
                            onMouseLeave={() => setHover(null)}
                        />
                    </label>

                );
            })}
        </div>
    );
};

export default Rater

评分者.css

input[type='radio'] {
    display: none;
}

.star {
    cursor: pointer;
    transition: color 200ms;
    /*transform: rotate(180deg);*/
}
.star-left {
    cursor: pointer;
    transition: color 200ms;
    transform: scaleX(-1);
}

标签： javascriptcssreactjsreact-functional-component

对齐内容最简单的方法是使用 flexbox。

您可以简单地将星星包装在容器中：

<div class="container">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

然后添加一点 flexbox 魔法：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;

您可以轻松调整星星的边距或填充。此外，您可以使用justify-content.

javascript - 让星星排列 CSS

问题描述

解决方案

推荐阅读