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