react常见问题

Posted 2020-09-21 小金鱼紫苏

本部分主要为表单相关。

1.表单form的react使用流程。

A.引入antd插件，声明FormItem

import {Form} from ‘antd‘;

const FormItem = Form.Item;

B.包装属性，使组件带有this.props.form属性

schoolEdit = Form.create({})(schoolEdit);

C.在render中声明要使用到的this.props.form带的api

const {getFieldDecorator} = this.props.form;

一个完整的表单：

<FormItem {...formItemLayout} label="详细地址：" hasFeedback >
        {getFieldDecorator(‘address‘, {rules: [{ required: true, message: ‘请输入详细地址1-100字符‘,type: "string",pattern: /^.{1,100}$/  }],})(<Input  placeholder="请输入详细地址"/>)}
</FormItem>

2.select选项showsearch属性实时匹配搜索。

3.如果rules里面的内容为空，会默认验证类型是否为string。

4.form里面嵌入form使用format时将会报错

5.select在表单加上默认值时应当为option的value值，常见加入选择全部如下：

<Option key={-1} value={null}>全部人员</Option>

6.同一页面不能有两个表单项名字一样，同一页面如果有多个表单，提交时验证混乱，全部将会一起提交。

解决办法，采用父子组件的形式，或者单独提交某些项。

7.时间项的必填等规则在rules里面无效，可以在formItem里面写required。

8.input组件若没有结尾符将会报错，若没有首字母大写则样式丢失。

9.若表单e.target。value来取值时报错，则采用传参数value来获取。

10.时间编辑时回显

const date=detail.take_time?moment(detail.take_time, ‘YYYY-MM-DD‘):null;
<FormItem {...formItemLayout} label="建校时间：" hasFeedback >
         {getFieldDecorator(‘schooltime‘, {initialValue:date, rules: [{type:"object"}], })(
               <DatePicker placeholder="请选择建校时间" style={{ width: ‘160px‘ }}/>
          )}
 </FormItem>            

11.设置必填可以rule里requore：true，也能直接在formItem设置required。

12.获取单个表单的值：var aa = this.props.form.getFieldValue(‘aa‘);

重置单个表单：this.props.form.resetFields(["aa",""]);

13.单选按钮里赋值不能采用大括号，要使用引号，select option赋值是大括号

<RadioGroup>

　　<Radio value="1">启用</Radio>

</RadioGroup>

14.表单中getFieldDecorator必须写上名字，不然报错

15.表单的验证规则写在rule内，带上类型验证