antd表单

1】表单联动

在知更新版运营管理开发过程中，遇到表单特别多的情况。

<Form.Item label="通知类型" wrapperCol={
   { span: 5 }}>
  {getFieldDecorator('type', {
    initialValue: notice_info.type || 1,
    rules: [{ required: true, message: '请选择通知类型' }],
  })(
    <div>
      <Select>
        <Select.Option value={1}>功能更新</Select.Option>
      </Select>
    </div>
  )}
</Form.Item>

antd表单的直接的通信是通过getFieldDecorator函数完成的，先包裹的元素上面加上labal标签的for属性绑定表单元素上面的id来实现的，所以上面的这样就不能获取到select选择框的值，而是绑定的div标签

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

可以充分运用antd的Form.create({})(Component)提供的属性和方法去操作表单：

Form.create(options)

options:

• mapPropsToFields：把父组件（或者redux）的属性映射到表单项上
• name： 设置表单域内字段 id 的前缀
• validateMessages：默认校验信息，可用于把默认错误信息改为中文等，格式与 newMessages 返回值一致
• onFieldsChange：当 Form.Item 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store
• onValuesChange：任一表单域的值发生改变时的回调

经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 提供的 API 如下：（注意：使用 getFieldsValuegetFieldValuesetFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。）

• getFieldDecorator('name',{})(<Input />)
• getFieldsValue(['name1',...,'name2'])（如果不传参数则获取所有组件值）
• getFieldValue('name')
• resetFields(['name1',...,'name2'])（如果不传则重置所有组件）
• setFieldsValue({'name':value}，()=>{})
• validateFields(['name1',...,'name2'],(err,value)=>{})如果不传第一个参数则验证所有组件的值
• …

下面是两个antd表单联动的例子：

//redux中使用connect({})(Form.create({})(Component))两次高阶组件进行包裹传值使用
const NewForm = connect((state) => {
    
  return {
    
    formState: {
    
      email: state.form.email,
    },
  };
})(createForm({
    
  mapPropsToFields(props) {
    
    console.log('mapPropsToFields', props);
    return {
    
      email: createFormField(props.formState.email),
    };
  },
  onFieldsChange(props, fields) {
    
    console.log('onFieldsChange', fields);
    props.dispatch({
    
      type: 'save_fields',
      payload: fields,
    });
  },
})(Form));

下面是在使用表单联动传递上层组件的例子

import { Form, Input } from 'antd';

const CustomizedForm = Form.create({
  name: 'global_state',
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      username: Form.createFormField({
        ...props.username,
        value: props.username.value,
      }),
    };
  },
  onValuesChange(_, values) {
    console.log(values);
  },
})(props => {
  const { getFieldDecorator } = props.form;
  return (
    <Form layout="inline">
      <Form.Item label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Username is required!' }],
        })(<Input />)}
      </Form.Item>
    </Form>
  );
});

class Demo extends React.Component {
  state = {
    fields: {
      username: {
        value: 'benjycui',
      },
    },
  };

  handleFormChange = changedFields => {
    this.setState(({ fields }) => ({
      fields: { ...fields, ...changedFields },
    }));
  };

  render() {
    const { fields } = this.state;
    return (
      <div>
        <CustomizedForm {...fields} onChange={this.handleFormChange} />
        <pre className="language-bash">{JSON.stringify(fields, null, 2)}</pre>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

2】打包设置环境变量区分不同环境

		 "build": "umi build"
"build:mini": "cross-env APP_TYPE=mini umi build"

向上面一样设置脚本之后，就可以使用process.env.APP_TYPE来获取我们设置的APP_TYPE的值，在代码中我们可以用来针对不同的线上环境来写代码。

比如：

在router.config.js中来判断是否隐藏菜单：

根据环境变量判断打包环境去执行代码：

3】Select标签做过滤模糊搜索

<Select
  mode="multiple"
  filterOption={(input, option) => {
    return (option.props.children as string).indexOf(input) > -1}}>
  <Select.Option value="zhangsan">张三</Select.Option>
  <Select.Option value="lisi">李四</Select.Option>
  <Select.Option value="wangwu">王五</Select.Option>
  														...
</Select>

这样就可以轻松实现模糊搜索！

4】循环遍历表单组件的处理

下面这个组件就是一个为可遍历的表单组件而设计的。（使用使用组件时传入的index来区分组件中的表单元素的KEY）

const Com = props => {
  const {
    form: { getFieldDecorator },
    index
  } = props

  return (
    <Form {...formLayout}>
      <Form.Item label="功能模块">
        {getFieldDecorator(`function_module_${index}`, {})(
          <Select>
            <Select.Option value={i}>{i}</Select.Option>
          </Select>
        )}
      </Form.Item>
      <Form.Item label="更新描述">
        {getFieldDecorator(`description_${index}`, {})(
            <Input.TextArea/>
        )}
      </Form.Item>
    </Form>
  )
}
export default Form.create()(Com)

外部调用：（此时就可以使用antd提供的表单API对每个子组件进行操作）

import Com from './Com'
dataSource.map((item,index) => <Com index={index}/> )

5】使用less的:global修改antd原有样式

.tabs {
  margin: 0 0 0 -8px;
  :global {
    .ant-tabs-bar {
      border-bottom: none;
      margin-bottom: 1px;
    }
  }
}