Javascript 更改React.js中选中单选按钮的样式

我有一些单选按钮，我设计成这样：

到目前为止，即使经过检查，它们看起来还是一样的。我想这样做，当你检查一个，而不仅仅是一个戒指，它填充了相同的颜色如下：

我该如何反应呢？我可以在CSS中为元素添加背景色，但不是每个元素自己的颜色（除非我为每个元素创建一个单独的类，但考虑到我有很多这样的元素，这看起来很长）

代码如下：

import React from 'react';
import Options from './Options.jsx';

class Icing extends React.Component {
    render() {
        return (
            <Options>
                <input type="radio" className="circle" name="icing" defaultValue={1} id="white" style={{border: "10px solid #EFE5CE"}} />
                <label class="radio" htmlFor="white"></label>
                <input type="radio" className="circle" name="icing" defaultValue={2} id="pink" style={{border: "10px solid #EF959D"}} />
                <label class="radio" htmlFor="pink"></label>
                <input type="radio" className="circle" name="icing" defaultValue={3} id="red" style={{border: "10px solid #90DDD0"}} />
                <label class="radio" htmlFor="red"></label>
            </Options>
        );
    }
};

export default Icing;

这是对按钮的测试：

onChange={this.handleChange} checked={this.state.checked} style={{backgroundColor: this.state.checked ? 'red' : 'white'}}

---

当然，点击后背景会发生变化，但当我点击另一个按钮时，背景不会恢复正常。我必须再次单击以使颜色消失

您可以使用

onChange

input的属性来处理检查。在handle函数中，可以更改组件的

状态

。使用状态设置样式。例如：

style={{backgroundColor: this.state.isCheck ? 'red': 'white'}}

---

您可以在React中使用javascript控制CSS

render() {

  const styles = {
    radioWhite: {
      border: "10px solid #90DDD0",
    },
    radioPink: {
      border: "10px solid #EF959D",
    },
    radioRed: {
      border: "10px solid #90DDD0",
    }
  };

  // pink on click
  styles.radioPink['backgroundColor'] = '#EF959D';

  return (
    <Options>
      <input type="radio" className="circle" name="icing" defaultValue={1} id="white" style={styles.radioWhite} />
      <label class="radio" htmlFor="white"></label>
      <input type="radio" className="circle" name="icing" defaultValue={2} id="pink" style={styles.radioPink} />
      <label class="radio" htmlFor="pink"></label>
      <input type="radio" className="circle" name="icing" defaultValue={3} id="red" style={styles.radioRed} />
      <label class="radio" htmlFor="red"></label>
    </Options>
  );
}

render（）{
常量样式={
无线电白：{
边框：“10px固体#90DDD0”，
},
放射粉：{
边框：“10px固体#EF959D”，
},
无线电红色：{
边框：“10px固体#90DDD0”，
}
};
//点击粉色
styles.radioPink['backgroundColor']='EF959D'；
返回(
);
}

我的react gallery项目中有更多示例：

render() {

  const styles = {
    radioWhite: {
      border: "10px solid #90DDD0",
    },
    radioPink: {
      border: "10px solid #EF959D",
    },
    radioRed: {
      border: "10px solid #90DDD0",
    }
  };

  // pink on click
  styles.radioPink['backgroundColor'] = '#EF959D';

  return (
    <Options>
      <input type="radio" className="circle" name="icing" defaultValue={1} id="white" style={styles.radioWhite} />
      <label class="radio" htmlFor="white"></label>
      <input type="radio" className="circle" name="icing" defaultValue={2} id="pink" style={styles.radioPink} />
      <label class="radio" htmlFor="pink"></label>
      <input type="radio" className="circle" name="icing" defaultValue={3} id="red" style={styles.radioRed} />
      <label class="radio" htmlFor="red"></label>
    </Options>
  );
}