[英]Changing style of checked radio button in React.js
I have some radio buttons which I've styled to look like this:我有一些单选按钮,我的样式如下:
As of now they look the same even when checked.到目前为止,即使检查时它们看起来也一样。 I want to make it so that when you check one, instead of just being a ring, it's filled in with the same color like this:
我想让它这样当你检查一个时,而不是只是一个戒指,它用相同的颜色填充,如下所示:
How would I do this in React?我将如何在 React 中做到这一点? I can add a background color to the element in the CSS but it won't be each element's own color (unless I create a separate class for each element but that seems very long considering I have a lot of these).
我可以在 CSS 中为元素添加背景颜色,但它不会是每个元素自己的颜色(除非我为每个元素创建一个单独的类,但考虑到我有很多这些,这似乎很长)。
Here's the code:这是代码:
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;
Thanks!谢谢!
EDIT编辑
Alright so I added this:好的,所以我添加了这个:
constructor() {
super();
this.state = {checked: false};
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.setState({
checked: !this.state.checked
})
}
And this to the button as a test:并将此按钮作为测试:
onChange={this.handleChange} checked={this.state.checked} style={{backgroundColor: this.state.checked ? 'red' : 'white'}}
And sure enough the background does change on click, but it doesn't go back to normal when I click another button.果然背景会在点击时改变,但当我点击另一个按钮时它不会恢复正常。 I have to click it again to make the color disappear.
我必须再次单击它才能使颜色消失。
You can use onChange
input's attribute to handle a check.您可以使用
onChange
输入的属性来处理检查。 In the handle function, you can change component's state
.在 handle 函数中,您可以更改组件的
state
。 Use state to set style.使用 state 设置样式。 For example:
例如:
style={{backgroundColor: this.state.isCheck ? 'red': 'white'}}
You can control CSS with javascript in React.你可以在 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>
);
}
I have more examples in my react-gallery project: https://github.com/bfwg/relay-gallery我的 react-gallery 项目中有更多示例: https : //github.com/bfwg/relay-gallery
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.