在选择输入中显示默认值，每个背景都不同：react js答案

【问题标题】：show default value in select input with backgroundcoulr different for each : react js在选择输入中显示默认值，每个背景都不同：react js
【发布时间】：2022-01-20 21:41:54
【问题描述】：

我根据user.subscription 动态显示了一些选择按钮，user.subscription 中的值可以是 2 个月包、3 个月包、6 个月包、12 个月包，

所以当映射全部加载时，user.subscription` 中的值应该被选为默认值

基于默认选择按钮，选择按钮的背景也必须有不同的颜色按钮

如果

默认选择 2 个月套餐，则 defaultcolor 应为红色

如果

默认选择 3 个月套餐，然后 defaultcolor 应该是绿色

如果

默认选择 6 个月套餐，然后 defaultcolor 应该是黄色

如果

默认选择 12 个月套餐，则 defaultcolor 应为橙色

{
  data.map((user) => (
    <select
      value={user.subscription}
      style={{ background: defaultcolor }}
      onChange={handleBackground}
    >
      <option value="white"> 2 month package</option>
      <option value="green">3 month package</option>
      <option value="red">6 month package</option>
      <option value="yellow">12 month package</option>
    </select>
  ));
}

【问题讨论】：

请在codesandbox.io添加示例代码
@A.R.SEIF codesandbox.io/s/nostalgic-resonance-hkbo4?file=/src/App.js 目前我只有一个订阅，所以只有一个条目
更改函数function handleBackground(e) { console.log("cfcvrr"); console.log(e.target.value); setdefaultcolor(e.target.value); }
codesandbox.io/s/billowing-flower-gkxxm?file=/src/…
从 user.subscription 加载的值

标签： javascript html css reactjs

【解决方案1】：

你可以像这样持有一个小的“配置”对象：

const monthToColor = {
  2: 'red',
  3: 'green',
  6: 'yellow',
  12: 'orange'
}

密钥应与您拥有的 user.subscription 选项匹配。

现在，为每个选项添加一个背景颜色为：monthToColor[user.subscription] 的样式，如下所示：

<option style={{ backgroundColor: monthToColor[user.subscription] }}>
  months
</options>

【讨论】：