下拉框不滚动问题

原因:下拉框是默认基于body定位的,所以当有下拉框的组件位于另一个有滚动条的弹出层,比如modal框时,由于body并没有滚动,下拉框不会随着modal的滚动而滚动,会挡住modal的滚动信息。
解决办法:
更改下拉框的默认定位元素。有一个API是getPopupContainer,可以在modal的第一层,包裹一个div,设置id为dropDownWrapper,再为每一个有下拉框的元素设置

1
getPopupContainer={() => document.getElementById('dropDownWrapper')}

日历的弹框是getCalendarContainer

form表单的使用注意

  1. 需要render前获取装饰器

    1
    const {getFieldDecorator} = this.props.form;
  2. 使用时需要装饰器,有rules,里面可以有validator,使用正则校验,并返回有status状态的函数,函数需要callback,正确匹配也应当执行callback,select的initialValue是undefined才会是置空状态。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <Form.Item label="姓名">
    {getFieldDecorator('userId', {
    rules: [
    {
    required: true,
    message: '姓名必填',
    },
    {
    max: 20,
    message: '上限20个字符'
    }
    ],
    // eslint-disable-next-line no-undefined
    initialValue: undefined
    })(
    <AutoComplete
    onSelect={this.onAddName}
    onSearch={this.handleSearchName}
    placeholder="请输入姓名"
    getPopupContainer={() => document.getElementById('modalScrollDiv')}
    >
    {reassignStaffs}
    </AutoComplete>
    )}
    </Form.Item>
  3. 最后导出需要form包装,

    1
    export default Form.create({name: 'register'})(ReassignModal);
  4. 注意的点,组件被form包装过了,所以表单里select框的值变化也是一种props变化,所以componentwillreceiveprops会被走到。

  5. 如果不想要form的一些性质,可以通过state来储存表单的值,使表单变成受控组件。