[英]How to render a checkbox with text inside using Reactjs?
I have an ant-design checkbox 我有一个蚂蚁设计复选框
My code is : 我的代码是:
<Checkbox checked={this.state.D} onChange={(e)=> this.setState({ D: e.target.checked})}>D</Checkbox>
<Checkbox checked={this.state.L} onChange={(e)=> this.setState({ L: e.target.checked})}>L</Checkbox>
<Checkbox checked={this.state.M} onChange={(e)=> this.setState({ M: e.target.checked})}>M</Checkbox>
<Checkbox checked={this.state.M1} onChange={(e)=> this.setState({ M1: e.target.checked})}>M</Checkbox>
<Checkbox checked={this.state.J} onChange={(e)=> this.setState({ J: e.target.checked})}>J</Checkbox>
when I run it, I get : 当我运行它时,我得到:
But, I want it with text inside like that: 但是,我想要这样的文字:
How can I render it ? 我该如何渲染?
Adding text inside of Checkbox
in antd
is equivalent to Radio.Group . 在
antd
的Checkbox
内部添加文本等效于Radio.Group 。
<Radio.Group defaultValue="a" size="large">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>;
If you want to use "Round Buttons" as in your example, you should make your own component using <Button shape="circle"/>
and manage it's clicked state. 如果要在示例中使用“圆形按钮”,则应使用
<Button shape="circle"/>
制作自己的组件并管理其单击状态。
Note: how to make such component is out of the scope of this question, although it is pretty basic.
注意:尽管这是非常基本的,但是如何制作这样的组件却超出了这个问题的范围。
Demo: 演示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.