Question

我在React中创建了一个下拉菜单。我希望所有菜单选项默认为'番茄'，然后当我选择一个选项时，我希望选中/选中的选项为'紫色'。我有React 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>

        );
    }
}

这是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

您的第一条css规则会杀死所选和未选择的选项之间的差异。改变风格：

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

更改React中的下拉选项不会应用样式定位选定选项

1 个答案: