Как сделать флажок с текстом внутри, используя Reactjs?

Question

У меня есть флажок ant-design

Мой код:

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

когда я запускаю его, я получаю:

Но я хочу это с текстом внутри вот так:

Как я могу сделать это?

Answer 1

Добавление текста внутри Checkbox в 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"/> и управлять состоянием его нажатия.

Примечание: как сделать такой компонент выходит за рамки этого вопроса, хотя он довольно простой.

Демо: