選択オプションがモバイルに表示されていません

Question

反応とスタイルのコンポーネントを使用して、私は質問をしたり、ユーザーが選択できる5つのオプション/開始バーを表示するための小さなコンポーネントを作成しました。ここ

は、それが見えるようになって何をされています

そのすべてがデスクトップ上に細かい作業が、モバイルブラウザ（AndroidまたはiOS）で見た場合、ユーザーはこれを見ている：

以下は私の完全な反応成分です。私は間違っていますか？

import React, {Component} from 'react'; 
import styled from 'styled-components'; 
import _ from 'lodash'; 

class Question extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      value: props.value 
     } 
     this.handleChange = this.handleChange.bind(this); 
    } 
    handleChange(event) { 
     this.setState({ 
      value: event.target.value 
     }); 
     this.props.onChange(event); 
    } 
    render() { 
     const {name, value, totalStars, caption} = this.props; 
     return (
      <Container className="rateOptions"> 
       <Caption>{caption}</Caption> 
       <Rating name={name} size={totalStars - 1} onChange={this.handleChange}> 
        {_.range(1, totalStars).reverse().map(function(object) { 
         if(object.toString() ===value) 
         return <option selected value={object.toString()} key={object.toString()}>☆</option> 
         return <option value={object.toString()} key={object.toString()}>☆</option> 
        })} 
       </Rating> 
       <RateValue> 
        {this.state.value} 
        /5 
       </RateValue> 
      </Container> 
     ); 
    } 
} 
export default Question; 

const Rating = styled.select ` 
    background: none; 
    font-size:30px; 
    color: gold; 
    unicode-bidi: bidi-override; 
    direction: rtl; 
    text-align: center; 
    overflow: hidden; 
    margin: 10px 0; 
    height: 35px; 
    outline: 0; 
    border:none; 
    float: left; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    > option { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    } 
    > option:hover, > option:hover ~ option, > option:checked, > option:checked ~ option { 
    color: transparent; 
    } 
    > option:hover:before, option:hover ~ option:before, option:checked:before, option:checked ~ option:before { 
    content: "★"; 
    position: absolute; 
    color: gold; 
    text-shadow: 2px 2px 1px #000; 
    } 
    > option:hover, option:checked, option:active, option:focus { 
    box-shadow: 0 0 10px 100px #000 inset; 
    } 
    `; 
const Container = styled.div ` 
    clear: both; 
`; 
const Caption = styled.div ` 
    font-size: 1.2em; 
`; 
const RateValue = styled.div ` 
    float: left; 
    padding:20px 10px; 
`; 

Answer 1

あなたは、その視覚的なスタイリングを更新するために選択したオプションにリフレッシュメソッドを呼び出す必要があります。

これがうまくいくと思います。