javascript - 如何使用 Reactjs 在内部呈现带有文本的复选框？

Question

我有一个蚂蚁设计复选框

我的代码是：

 <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>

当我运行它时，我得到：

但是，我希望它里面有这样的文字：

我该如何渲染它？

标签： javascriptcssreactjscheckboxantd

Answer 1

Checkbox在in 中添加文本antd等同于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>;

如果您想在示例中使用“圆形按钮”，您应该使用<Button shape="circle"/>并管理您自己的组件的单击状态。

注意：如何制作这样的组件超出了这个问题的范围，尽管它非常基本。

演示：