全网react+飞冰（ice）UI框架组件实例（2）-表单篇

最近在做在一个后台系统，用的就是技术就是react+飞冰（ice）UI框架，在开发过程中发现关于飞冰这个UI框架的相关资料比较少，所以我这里分享一些常用的飞冰UI组件实例，由于内容比较多，所以几篇来写！

完整的表单提交实例

html结构代码

<Form labelAlign="top" className={styles.baseSetting} value={addList} responsive>
     <FormItem label="用户名" required requiredMessage="用户名必填" colSpan={12}>
      <Input placeholder="请输入用户名" name="username" disabled={tabSwith ? true : false} />
    </FormItem>
    <FormItem label="所属部门" required requiredMessage="所属部门必选" colSpan={6}>
        <TreeSelect name="syoufk" treeDefaultExpandAll dataSource={tableDataunits.data.list} style={{ width: '100%' }} hasClear />
  </FormItem>
  <FormItem label="职位" colSpan={6}>
    <Select showSearch hasClear name='dutyfk' dataSource={tableDataposition.data.list} style={{ width: '100%' }} placeholder="职位" />
  </FormItem>
  <FormItem colSpan={6} required label="是否管理员" requiredMessage="是否管理员必选">
    <Radio.Group name="isadmin" aria-labelledby="authority of project" defaultValue={1}>
      <Radio id="private" value={1}>
        是
    </Radio>
      <Radio id="internal" value={0}>
        否
    </Radio>
    </Radio.Group>
  </FormItem>
  <FormItem colSpan={12}>
  <Box spacing={8} direction="row">
    <Form.Submit type="primary" loading={submitloaging} validate onClick={submitadd}>
      保存
      </Form.Submit>
    <Button type="secondary" onClick={onCloseadd}>
      取消
      </Button>
  </Box>
</FormItem>
</Form>

js代码

const submitadd = (value, error) => {
    if (error) {
      return;
    }
    setaddVisible(true)
    var data = {
      roles: roleList,
      userName: value.username,
      dutyId: value.dutyfk ? value.dutyfk : '',
      isAdmin: value.isadmin,
      syoufk: value.syoufk,
      homefk: value.homefk ? value.homefk : '',
      mapfk: value.mapfk ? value.mapfk : '',
      phone: value.phone ? value.phone : '',
      name: value.name,
      alarm:value.alarm ? value.alarm : '',
      headimg: headimgData.headimg ? headimgData.headimg : ''
    }

     data.password = (md5(value.password)).toUpperCase(),
     add(data)
  }
 // 新增
  const add = (data) => {
    setsubmitloaging(true)
    request.post(`${request.userAdd}`, data).then(function (response) {
      if (response.code !== '-1') {
        common.NoticeSuccess('用户', '用户新增成功')
        // websockerutils.sendMessage("cs", { type: 3 })
        onCloseadd()
        props.onCloseNews(true)
      } else {
        common.NoticeError('用户', response.message || '用户新增失败')
      }
      setsubmitloaging(false)
    }).catch(function (e) {
      common.NoticeError('用户', '用户新增失败')
      setsubmitloaging(false)
    });
  }