改變React.js

Question

檢查單選按鈕的風格我有我的風格，看起來像這樣一些單選按鈕：

截至目前，他們看起來檢查，即使是相同的。我想使它這樣，當你選中一個，而不是僅僅作爲一個環，它填補了用相同的顏色是這樣的：

我會怎麼做這樣的反應是？我可以爲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 input屬性來處理檢查。在句柄功能中，您可以更改組件的state。使用狀態設置樣式。例如：

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

Answer 2

您可以在JavaScript中使用React控制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> 
); 
} 

我有我的反應畫廊項目的更多例子： https://github.com/bfwg/relay-gallery