react antd

表单

基本结构：

import React, { Component } from "react";

class FormDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //...
    };
  }

  render() {
    return (
      <div>
        //...
      </div>
    );
  }
}

export default FormDemo;

　

属性

layout

三种排列方式：

• 水平排列horizontal：标签label和表单控件水平排列；（默认）

• 垂直排列vertical：标签label和表单控件上下垂直排列；

• 行内排列inline：表单项Form.Item水平行内排列

 labelAlign

label 标签的文本对齐方式: 'left' | 'right'

需要结合labelCol（label占的格子数，总24） 和wrapperCol （form.item占的格子数，总24）使用, 若labelCol+wrapperCol <24，水平居中显示

labelAlign="right"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}

labelCol

• 3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}
• 类型Object

wrapperCol

（3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol

colon

• 配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效)，是否显示冒号
• boolean
• 默认：true

hideRequiredMark

• 是否隐藏所有表单项的必选标记 “*”
• 类型Boolean
• 默认false

form

• 经 Form.create() 包装过的组件会自带 this.props.form 属性
• 类型object

Input组件

Input属性

defaultValue

• 默认值
• 类型string
• value与value无任何关系
• defaultValue会在第一次渲染时起效，之后再改变其绑定的值，也不会引起重新渲染，与value起效时间刚相反

value

• 值
• 类型string
• value第一次渲染时不起效，只在onChange之后才起效，与defaultValue起效时间刚相反

disabled

• 是否禁用状态
• 类型boolean
• 默认为 false

allowClear

• 可以点击清除图标删除内容
• 类型boolean

maxLength

最大长度

type

与原生的一致

onChange

• 输入框内容变化时的回调
• function(e)
• e.target.value

onPressEnter

• 按下回车的回调
• function(e)
• e.target.value

prefix 和 addonBefore 异同

同：

1. 功能一样，给input 加前缀
2. 类型一致，string|ReactNode

异: 

1. 样式不一样

suffix 和 addonAfter 异同

同：

1. 功能一样，给input 加前缀
2. 类型一致，string|ReactNode

异: 

1. 样式不一样

使用input 需要使用value和onChange 相结合，实现数据双向绑定

nameChange = (e) => {
    this.setState({name: e.target.value})
  }
  render() {
    const { name, phone } = this.state;
    return (
      <div>
        <form onSubmit={this.submitHandler}>
          名字：
        <Input type="text" value={name} onChange={this.nameChange} />
        </form>
      </div>
    );
  }