html - 应用 css 时单选按钮单击不起作用

Question

我正在尝试对我的 React 元素实现星级评分系统，但我遇到了一些奇怪的问题。我正在关注以下文章。

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

我已经完成了文章中提到的所有事情并且它工作正常但问题是，我无法选择应用了 css 的星号(单选按钮)。我在没有应用 css 的情况下尝试过，然后它工作正常。我已经将 onClick 给了一个没有 css 的单选按钮，然后它就可以工作了。但是一旦我应用了 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 时，它显示正常的单选按钮，但它正在工作。有了那个类(class)，它就停止工作了。

Answer 1

你应该用js控制你的 radio 。

为您找到教程:http://react.tips/radio-buttons-in-reactjs/