是否可以让antd的Form Item变得灵活答案

【问题标题】：is it possible to make the antd FormItem flexiable是否可以让antd的Form Item变得灵活
【发布时间】：2022-01-08 14:09:53
【问题描述】：

我使用FormItem作为应用UI表格过滤条件，并使用Row和Col来布局组件。目前我面临一个问题，当用户缩放窗口时，FormItem 无法自动调整屏幕大小。所以我想让FormItem 灵活，当用户缩放浏览器窗口时，FormItem 可以自动重新排列为多行以自动适应屏幕变化。这是我正在使用的代码：

renderSimpleForm() {
    const {
      form,
      dispatch,
      loading,
      activityM: { wordItems = [] },
      activityM,
    } = this.props;
    const { getFieldDecorator } = form;
    const {
      formValues: { goodWord },
    } = this.state;

    
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={16} justify="start">
          <Col md={5} sm={24}>
            <FormItem label="create date：">
              {getFieldDecorator('activityCreateTime', {
              })(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="activity date：">
              {getFieldDecorator('activityTime', {
              })(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col md={3} sm={24}>
            <FormItem label="activity status:">
              {getFieldDecorator('activityStatus', {
                initialValue: '',
              })(
                <Select placeholder="please choose" style={{ width: 85 }} onSelect={this.onChoseHouse}>
                  <Option value="">all</Option>
                  {getSelectOptionByArr(questionType)}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={4} sm={24}>
            <FormItem label="user：">
              {getFieldDecorator('name', {
                initialValue: this.state.formValues.name,
                rules: [{ required: false }],
              })(<Input type="text" placeholder="creator" />)}
            </FormItem>
          </Col>
          <Col md={2} sm={20}>
            <Button type="primary" shape="round" htmlType="submit" className="fun-button">
             search
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }

我应该怎么做才能使FormItem 项目灵活？

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

我现在用不同的设备定义不同的大小，就像每个 col 一样：

          <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={5}>
            <FormItem label="create date：">
              {getFieldDecorator('activityCreateTime', {
              })(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
            </FormItem>
          </Col>

【讨论】：