React form表单中插入封装的组件

<Form>
            <Form.Item label="时间区间" {...formItemLayout}>
              {getFieldDecorator('time-picker')(<TimeSelector />)}
// 插入组件
            </Form.Item>
            <div className={styles['btn-group']}>
              <Radio.Group buttonStyle="solid" size="small" onChange={this.handleTimeChange}>
                <Radio.Button value="hours">
                  <div style={{ width: '55px', textAlign: 'center' }}>最近1小时</div>
                </Radio.Button>
                <Radio.Button value="today">
                  <div style={{ width: '55px', textAlign: 'center' }}>今天</div>
                </Radio.Button>
                <Radio.Button value="threeday">
                  <div style={{ width: '55px', textAlign: 'center' }}>近3天</div>
                </Radio.Button>
                <Radio.Button value="week">
                  <div style={{ width: '55px', textAlign: 'center' }}>近1周</div>
                </Radio.Button>
              </Radio.Group>
            </div>
            <Form.Item label="区域" {...formItemLayout}>
              {getFieldDecorator('region-picker')(<RegionSelector rootNode={treeData} onTreeLoadData={this.getCatchChannelCheckBoxTree} />)}
            </Form.Item>
            <Form.Item label="性别" {...formItemLayout}>
              {getFieldDecorator('six-picker')(
                <Select>
                  <Option value="jack">全部</Option>
                  <Option value="lucy">男</Option>
                  <Option value="tom">女</Option>
                </Select>
              )}
            </Form.Item>
            <Form.Item label="年龄" {...formItemLayout}>
              {getFieldDecorator('region-picker')(<AgeInput />)}
            </Form.Item>
          </Form>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值