@ant-design/compatible.FormItem.Item JavaScript and Node.js code examples

  <Menu.Item key={library.value}>{library.title}</Menu.Item>
 ))}
</Menu>
  <Menu.Item key={f.id}>{f.title}</Menu.Item>
 ))}
</Menu>
  <Menu.Item key={f.name}>{f.description}</Menu.Item>
 ))}
</Menu>
  <Form.Item label="Framework">
   <Dropdown overlay={frameworkMenu}>
    <Button>
    </Button>
   </Dropdown>
  </Form.Item>
  {frameworkItem && frameworkItem.docsLink && (
   <Alert
  <Form.Item label="Main Template">
   <Dropdown
    overlay={templatePackagesMenu}
    </Button>
   </Dropdown>
  </Form.Item>

const renderContactlForm = () => {
    return (
      <Card title="联系信息" bordered={false} size="small">
        <LegacyForm.Item label="手机号码">
          {getFieldDecorator('mobile')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="电子邮件">
          {getFieldDecorator('email')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="地区">
          <SelectLocation location={userInfo.location} onChange={value => {
            userInfo.location = value
          }} />
        </LegacyForm.Item>
      </Card>
    )
  }

renderContactlForm() {
    const {getFieldDecorator} = this.props.form
    const {userInfo} = this.state

    return (
      <Card title="联系信息" bordered={false} size="small">
        <LegacyForm.Item label="手机号码">
          {getFieldDecorator('mobile')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="电子邮件">
          {getFieldDecorator('email')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="地区">
          <SelectLocation location={userInfo.location} onChange={value => {
            userInfo.location = value
            this.setState({userInfo})
          }} />
        </LegacyForm.Item>
      </Card>
    )
  }

return (
  <Card title="角色权限" bordered={false} size="small">
    <LegacyForm.Item label="角色">
      <div>
        {userInfo.roles ? userInfo.roles.map(role => {
        }) : '未设置'}
      </div>
    </LegacyForm.Item>
    <LegacyForm.Item label={<Tooltip title="用户实际权限为角色权限+管理员设置权限">权限 <Icon type="question-circle" /></Tooltip>}>
      <div>
        {userInfo.permissions ? userInfo.permissions.map(perm => {
        }) : '未设置'}
      </div>
    </LegacyForm.Item>
  </Card>

<LegacyForm.Item>
  <div>
    <Avatar src={avatarSrc} size={128} icon={avatarSrc ? undefined : <Icon type="user" />} style={{marginTop: 50}} />
    </UploadFile>
  </div>
</LegacyForm.Item>

  <LegacyForm.Item required label="分类英文名">
    {getFieldDecorator('name', {
      rules: [
  </LegacyForm.Item>
  <LegacyForm.Item required label="分类显示名">
    {getFieldDecorator('dis_name', {
      rules: [{required: true, message: '显示名称必填'}]
    })(<Input placeholder="请输入" />)}
  </LegacyForm.Item>
</LegacyForm>

    }}
    <Form.Item label={label}>
      {getFieldDecorator('input', {
        initialValue,
        rules
      })(<InputComp {...inputProps} style={{width: '100%'}} />)}
    </Form.Item>
  </Form>
</Modal>

const renderRoleForm = () => {
    return (
      <Card title="角色权限" bordered={false} size="small">
        <LegacyForm.Item label="角色">
          <div>
            {roles.length > 0 ? roles.map(role => {
            }} />
          </div>
        </LegacyForm.Item>
        <LegacyForm.Item label={<Tooltip title="用户实际权限为角色权限+管理员设置权限">权限 <Icon type="question-circle" /></Tooltip>}>
          <div>
            {permissions.length > 0 ? permissions.map(perm => {
            }} />
          </div>
        </LegacyForm.Item>
      </Card>

  <LegacyForm.Item required label="权限名称">
    {getFieldDecorator('name', {
      rules: [
  </LegacyForm.Item>
  <LegacyForm.Item required label="显示名称">
    {getFieldDecorator('dis_name', {
      rules: [{required: true, message: '显示名称必填'}]
    })(<Input placeholder="请输入" />)}
  </LegacyForm.Item>
  <LegacyForm.Item label="分类名称" extra="可选">
    <Row gutter={8}>
      <Col span={20}>
      </Col>
    </Row>
  </LegacyForm.Item>
  <LegacyForm.Item label="备注">
    {getFieldDecorator('description')(<Input.TextArea placeholder="请输入" />)}
  </LegacyForm.Item>
</LegacyForm>

  <LegacyForm.Item label="用户名">
    {getFieldDecorator('user_name', {
      rules: [
  </LegacyForm.Item>
  <LegacyForm.Item required label="昵称">
    {getFieldDecorator('nick_name', {
      rules: [
  </LegacyForm.Item>
  <LegacyForm.Item label="密码">
    {getFieldDecorator('password', {
      rules: [
      />
    )}
  </LegacyForm.Item>
  <LegacyForm.Item label="性别">
    {getFieldDecorator('gender')(
      <Select placeholder="请选择">
      </Select>
    )}
  </LegacyForm.Item>
  <LegacyForm.Item label="真实姓名">
    {getFieldDecorator('real_name')(<Input />)}
  </LegacyForm.Item>
</Card>

children.push(
  <Col span={8} key={`sch${column.dataIndex}`}>
    <LegacyForm.Item label={column.title} labelAlign={expand ? 'right' : 'left'} labelCol={{span: 6}}>
      {getFieldDecorator(column.dataIndex)(renderFormField(column))}
    </LegacyForm.Item>
  </Col>

  <LegacyForm.Item required label="字典名称">
    {getFieldDecorator('name', {
      rules: [
  </LegacyForm.Item>
  <LegacyForm.Item required label="显示名称">
    {getFieldDecorator('dis_name', {
      rules: [{required: true, message: '显示名称必填'}]
    })(<Input placeholder="请输入" />)}
  </LegacyForm.Item>
  <LegacyForm.Item label="分类" extra="可选">
    <Row gutter={8}>
      <Col span={20}>
      </Col>
    </Row>
  </LegacyForm.Item>
  <LegacyForm.Item label="取值列表">
    <ValuesList editMode={editMode} dictInstance={dictRef.current} onOk={valueList => {
      dictRef.current.values = valueList
    }} />
  </LegacyForm.Item>
  <LegacyForm.Item label="备注">
    {getFieldDecorator('description')(<Input.TextArea placeholder="请输入" />)}
  </LegacyForm.Item>
</LegacyForm>

  <LegacyForm.Item required label="角色名称">
    {getFieldDecorator('name', {
      rules: [
  </LegacyForm.Item>
  <LegacyForm.Item required label="显示名称">
    {getFieldDecorator('dis_name', {
      rules: [{required: true, message: '显示名称必填'}]
    })(<Input placeholder="请输入" />)}
  </LegacyForm.Item>
  <LegacyForm.Item label="分类名称" extra="可选">
    <Row gutter={8}>
      <Col span={20}>
      </Col>
    </Row>
  </LegacyForm.Item>
  <LegacyForm.Item label="角色权限">
    <div>
      {permissions.length > 0 ? permissions.map(perm => {
      }} />
    </div>
  </LegacyForm.Item>
  <LegacyForm.Item label="备注">
    {getFieldDecorator('description')(<Input.TextArea placeholder="请输入" />)}
  </LegacyForm.Item>
</LegacyForm>

const renderGeneralForm = () => {
    return (
      <Card title="基本信息" bordered={false} size="small">
        <LegacyForm.Item required={editMode === 1} label="用户名">
          {getFieldDecorator('user_name', {
            rules: [
        </LegacyForm.Item>
        <LegacyForm.Item label="管理员用户">
          {getFieldDecorator('is_admin')(<Switch checked={userInfo.is_admin} onChange={val => userInfo.is_admin = val} />)}
        </LegacyForm.Item>
        <LegacyForm.Item required label="昵称">
          {getFieldDecorator('nick_name', {
            rules: [
        </LegacyForm.Item>
        <LegacyForm.Item required={editMode === 1} label="密码">
          {getFieldDecorator('password', {
            rules: [
            />
          )}
        </LegacyForm.Item>
        <LegacyForm.Item label="性别">
          {getFieldDecorator('gender')(
            <Select placeholder="请选择">
            </Select>
          )}
        </LegacyForm.Item>

How to use Itemfunctionin FormItem

Best JavaScript code snippets using @ant-design/compatible.FormItem.Item(Showing top 14 results out of 1,395)

How to use
Item
function
in
FormItem