老师，请问下，这个form表单一个item里面只能放一个子组件的话，那我比如是一对checkbox岂不是不能放一起？或者说我里面带一个span标签做解释都不行了

Question

老师，请问下，这个form表单一个item里面只能放一个子组件的话，那我比如是一对checkbox岂不是不能放一起？或者说我里面带一个span标签做解释都不行了

Answer 1

张轩 2022-11-05 09:43:59

同学你好

一对checkbox 就代表两个值，所以用两个 Item 就可以了，然后手动的改改样式。

对于个性化的样式，可以将对应的标签放在Item 外面啊。我们的例子中有自定义的样式，可以参考下：

      <div className='agreement-section' style={{ 'display': 'flex', 'justifyContent': 'center'}}>
        <Item
          name='agreement' 
          rules={[{ type: 'enum', enum: [true], message: '请同意协议'}]}
          getValueFromEvent={(e) => e.target.checked }
          valuePropName='checked'
        >
          <input type="checkbox"/>
        </Item>
        <span className="agree-text">注册即代表你同意<a href='#'>用户协议</a></span>
      </div>

在线地址在这里：https://vikingship.xyz/?path=/docs/form--a-basic-form

• 提问者 weixin_慕的地0476602 #1

  老师您好，我的意思应该是多个checkbox控制一个变量，也就是checkboxGroup，那这时候不是应该只能用一个item嘛，所以这样还需要自己写个checkboxGroup组件嘛。举个例子，就是让人用checkbox选择性别

• 张轩 回复 提问者 weixin_慕的地0476602 #2

  同学你好 你说的男女这种情况应该是 Radio 吧，checkbox 是多选的。这种情况下，确实不同的组件库都需要包裹一下，比如 ant-design 的 form 最下面的那个例子，它也会有一个 外层组件：https://ant.design/components/form-cn/  checkbox 同理，也是需要自己包裹一下。

• 提问者 weixin_慕的地0476602 回复 张轩 #3

  好的，谢谢老师