时间: 2019-05-28阅读: 764标签: 组件

引用form是第三方插件ant插件,官网网址:https://ant.design/。用到的antd的版本是@2.0.1。form(https://ant.design/components/form/)表单页面的大概样子如下:

Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的,那么怎么定制ant组件的样式去实现我们的需求呢?

js9905com金沙网站 1

1.查阅ant组件的api文档,里面通常会有描述组件的属性功能。比如Menu组件,它可以很方便的实现二级菜单的功能,但是怎么定制二级菜单每个item的样式呢,Menu组件有个data的label属性,可以接收string和ReactNode类型的参数,如果是string的话就直接显示到原生的view上;如果是ReactNode类型,就会显示自定义的样式,那么ReactNode又是什么呢?ReactNode其实就是那些自定义的view,比如

image.png

 ( div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }} texttest/text /div );

组件讲解:

把label设置为这个自定义的view之后,二级菜单的每个item就会显示成自己的view。

<Form></Form>表单

2.在浏览器的调试台,在elements里面找到ant组件,找到className,找到对应的属性,然后在less或css里面去修改样式。

或者给ant组件设置一个className,在css里面设置样式也可以。再或者使用React.CSSProperties,在react里面设置内联样式,举个例子:

js9905com金沙网站,horizontal表示水平排列布局,数据类型是布尔,默认值为false;onSubmit表示数据验证成功后回调事件,数据类型是函;required表示必填,前面会显示红色的图标。

div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }} Content of first tab /div

<FormItem></FormItem>

上面那个style=后面的就是React.CSSProperties。

中包含的是一个小小的组件,可以是文本框、单选按钮、多选按钮、下拉框等。{…formItemLayout}是reactjs中属性的写法{…props},formItemLayout标签布局,wrapperCol需要为输入控件设置布局样式时,和label
标签布局,通

<Col>

组件,设置

span

offset

值,如{span: 3, offset: 12}

。label标签的文本。getFieldDecorator用于和表单进行双向绑定,获取该组件的值:this.props.form.getFieldDecorator(id,
options)。详细API如下:

js9905com金沙网站 2

image.png

其中详细讲解日期组件,

js9905com金沙网站 3

image.png

代码如下,getFieldDecorator中的id是timeRange,是form中唯一的;initialValue日期初始化的值,类型是[moment,moment],moment(startDate).startOf(‘day’)是将今天的日期转换为日期组件所能显示的格式;rules表示校验,数据类型是数组【】。若是没选择日期提交form表单时,会在日期组件输出“请输入时间段!”,dateSelect方法是在提交的时候调用进行相对应的校验,更多校验请点击该网址:https://github.com/yiminghe/async-validator

validateTrigger:校验子节点值的时机。disabledDate表示来确定不可选时段

js9905com金沙网站 4

image.png

红框中的日期是不可选择的。

/**
* 判断推荐时间是否选择
*/

dateSelect(rule, value, callback) {

    if(!this.state.disabledDates){

        if(value===undefined){

            callback(new Error("请输入时间段!"));

        }else{

            callback();

        }

    }else if(this.state.disabledDates){

        callback();

}

}

//设置日期组件所选择的日期(所选择的日期只能是今天及今天以后的)

const disabledDate = function (current) {

       return  current  <= (new Date()).getTime()-1000*60*60*24;

    };

const date = new Date();

const startDate=date.toLocaleDateString();//获取当前日期(年月日)

<FormItem wrapperCol={{span: 16, offset: 2}}>

{getFieldDecorator(‘timeRange’,

       {initialValue:[moment(startDate).startOf('day'),moment(startDate).endOf('day')]},

{rules: [{validator: this.dateSelect.bind(this)},],},

     {validateTrigger:'onChange'})

    (<RangePicker disabled={this.state.disabledDates} disabledDate={disabledDate} />)}

</FormItem>

当form中的FormItem组件创建完毕,需要定义组件默认的属性值以及校验从父组件传递的属性,最后再将form表单包起来。代码如下:

//定义组件默认的属性值(如果父组见没有传递数据,使用默认数据)

CreateActivity.defaultProps = {};

//校验从父组件传递的属性值是否符合

CreateActivity.propTypes = {