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 异同

同：

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

异:

样式不一样

suffix 和 addonAfter 异同

同：

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

异:

样式不一样

使用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>
    );
  }