Question

我有一些单选按钮，我的样式看起来像这样：

截至目前，即使经过检查，它们看起来也是一样的。我想这样做，以便当你检查一个而不仅仅是一个戒指时，它会用这样的颜色填充：

我如何在React中执行此操作？我可以为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;

谢谢！

修改
好吧，所以我补充说：

    constructor() {
        super();
        this.state = {checked: false};
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange() {
        this.setState({
            checked: !this.state.checked
        })
    }

这是按钮作为测试：

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

当然，背景确实会在点击时发生变化，但是当我点击另一个按钮时它不会恢复正常。我必须再次点击它才能使颜色消失。

Answer 1

您可以使用onChange输入的属性来处理检查。在handle函数中，您可以更改组件的state。使用state设置样式。例如：

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

Answer 2

您可以在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>
  );
}

我在react-gallery项目中有更多示例： https://github.com/bfwg/relay-gallery

在React.js中更改已检查单选按钮的样式

2 个答案: