Question

我正在尝试为我的反应项目实施星级评分系统，我面临一些奇怪的问题。我正在关注以下文章。

http://code.stephenmorley.org/html-and-css/star-rating-widget/#download

我已经完成了文章中提到的所有内容并且它工作正常但问题是，我无法选择应用了css的星号（单选按钮）。我已经尝试过它而不应用css然后它正常工作。我给了一个没有css的单选按钮onClick，然后它正在工作。但是一旦我应用了CSS它就行不通（点击事件没有被触发。）我该如何解决这个问题呢？

class StarRating extends Component {
    constructor() {
        super();
    }

    radio(){

        alert("sgssg");

    }

    render() {

        return (

            <div>
                <span className="starRating" >
                    <input id="rating5" type="radio" name="rating" value="5" onClick={this.radio.bind(this)}/>
                    <label for="rating5">5</label>
                    <input id="rating4" type="radio" name="rating" value="4"/>
                    <label for="rating4">4</label>
                    <input id="rating3" type="radio" name="rating" value="3"/>
                    <label for="rating3">3</label>
                    <input id="rating2" type="radio" name="rating" value="2"/>
                    <label for="rating2">2</label>
                    <input id="rating1" type="radio" name="rating" value="1"/>
                    <label for="rating1">1</label>
                </span>
            </div>


    );
    }
    }

    export default StarRating;

CSS

.starRating:not(old) {
    display: inline-block;
    width: 7.5em;
    height: 1.5em;
    overflow: hidden;
    vertical-align: bottom;
}

.starRating:not(old) > input {
    margin-right: -100%;
    opacity: 0;
}

.starRating:not(old) > label {
    display: block;
    float: right;
    position: relative;
    background: url('../Images/star-off.svg');
    background-size: contain;
}

.starRating:not(old) > label:before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url('../Images/star-on.svg');
    background-size: contain;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before {
    opacity: 1;
}

当我删除css类starRating时，它显示正常的单选按钮，但它正在工作。有了这个课程，它就会停止工作。

Answer 1

您应该使用js控制您的无线电。

找到你的教程： http://react.tips/radio-buttons-in-reactjs/

Answer 2

我做了一个jsbin

https://jsbin.com/wogotuzubo/edit?html,css,js,console,output

你的css中存在一个问题，因为opacity:0;技术上它的工作使得radioButton消失了。但你看不到按钮，所以你不能点击它，所以没有警报。

所以看看你的css并试着解决它。

javascript没问题。

当css应用时，单选按钮单击不起作用

2 个答案: