antd自定义form表单控件

用 getFieldDecorator 方法包裹的表单控件会自动添加 value (或由 valuePropName 指定的属性名) 和 onChange （或由 trigger 指定的属性名）属性， value 接收 form 传入的值， onChange 将控件的值回调到 form 中。这两个属性是自动添加的，所以自定义控件不能有这两个属性。
借鉴：https://www.jianshu.com/p/2091e7a2c36a

import React, { PureComponent } from "react";
import { Checkbox  } from "antd";
import styles from './index.module.less'const CheckboxGroup = Checkbox.Group;
class CheckBox extends PureComponent {constructor(props) {super(props)this.state = {checkedList: props.value || [],indeterminate: true,checkAll: false,}}// 改变选中onCheckChange = checkedList => {const { onChange, options } = this.propsthis.setState({checkedList,indeterminate: !!checkedList.length && checkedList.length < options.length,checkAll: checkedList.length === options.length,})onChange && onChange(checkedList)};// 选中全部onCheckAllChange = e => {const {options, onChange} = this.propsthis.setState({checkedList: e.target.checked ? options : [],indeterminate: false,checkAll: e.target.checked,})onChange && onChange(e.target.checked ? options : [])}render() {const {showAll,options} = this.propsreturn (<div className={styles.checkBoxWrap}>{showAll && <Checkboxindeterminate={this.state.indeterminate}onChange={this.onCheckAllChange}checked={this.state.checkAll}>全部</Checkbox>}<CheckboxGroupoptions={options || []}onChange={this.onCheckChange}value={this.state.checkedList}/></div>)}
}
export default CheckBox;

antd自定义form表单控件相关推荐

Form表单控件与浮动
Form表单控件第一点: 文本域 textarea 语法属性 name:控件的名字 cols:指定文本域的列数,变相设置宽度 rows:指定文本域的行数,变相设置高度 readonly:只读 pl ...
ExtJs简单form表单控件
ExtJs常用表单控件 2011-05-31 18:14 我们还是从最简单的代码实例开始吧:  <body> <div id="for ...
form表单控件及控件属性
今天又学习了前端的form控件,这是我第二遍学习,确实发现不少新东西,把自己觉得常用的记下来表单控件: **form:最主要的一个标签,但是这个元素不会生成可是化部分**属性:action:表单提交 ...
JSP常用Form表单控件
[easyui]--combobox--赋值和获取选中的值 /初始化下拉选框$('#communityIdDiv').combobox({ url:basepath+"pushControl ...
Angular19 自定义表单控件
1 需求当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;li ...
Angular 4.x 自定义表单控件
当我们打算自定义表单控件前,我们应该先考虑一下以下问题: 是否已经有相同语义的 native (本机) 元素?如:<input type="number"> 如果有,我 ...
Angular: [ControlValueAccessor] 自定义表单控件
Angular: [ControlValueAccessor] 自定义表单控件我们在实际开发中,通常会遇到各种各样的定制化功能,会遇到有些组件会与 Angular 的表单进行交互,这时候我们一般会从 ...
细说 Angular 的自定义表单控件
我们在构建企业级应用时,通常会遇到各种各样的定制化功能,因为每个企业都有自己独特的流程.思维方式和行为习惯.有很多时候,软件企业是不太理解这种情况,习惯性的会给出一个诊断,『你这么做不对,按逻辑应该这 ...

antd自定义form表单控件

antd自定义form表单控件相关推荐

最新文章

热门文章