Das Ändern der Dropdown-Option in Reagieren gilt nicht für das ausgewählte Design-Targeting

Question

Ich erstelle ein Dropdown-Menü in React. Ich möchte, dass alle Menüoptionen standardmäßig 'Tomate' sind. Wenn ich dann eine Option auswähle, möchte ich, dass die ausgewählte/markierte Option 'lila' ist. Ich habe reagiert 15.6.2.

class BridesmaidsNumber extends Component { 
    handleChange(e) { 
     console.log("change in bridesmaids number" + e); 
     this.props.onUserDataChange(e.target.name, e.target.value); 
    } 

    render() { 
     let {bridesmaids_number} = this.props.userData; 
     let optionsState = bridesmaids_number == "" ? "none" : bridesmaids_number; 
     return (

      <div className="cell"> 
       <select className={!bridesmaids_number.length ? 'placeholder-select' : ''} 
         name="bridesmaids_number" 
         id="bridesmaids_number" 
         onChange={this.handleChange.bind(this)} 
         value={optionsState}> 
        <option value="none" disabled>Number of Bridesmaids in the wedding</option> 
        <option value="0" checked={optionsState == 0}>Not sure yet</option> 
        <option value="1" checked={optionsState == 1}>1</option> 
        <option value="2" checked={optionsState == 2}>2</option> 
        <option value="3" checked={optionsState == 3}>3</option> 

       </select> 
      </div> 

     ); 
    } 
} 

Hier ist die CSS

select option { 
    color: purple; 
    } 
    select:not(:checked) { 
    color: tomato; 
    } 

    select:checked { 
    color: purple; 
    } 

    option:hover, 
    option:focus, 
    option:active, 
    option:checked { 
    color: purple; 
    } 

Answer 1

Ihre erste CSS-Regel tötet den Unterschied zwischen ausgewählten und nicht ausgewählten Optionen. Ändern Sie Stile:

select option, select:not(:checked) { 
    color: tomato; 
} 
select:checked { 
    color: purple; 
} 
option:hover, option:focus, option:active, option:checked { 
    color: purple; 
}