Блог

Я использую FormItem в качестве условия фильтра таблицы пользовательского интерфейса приложения и использую Row и Col для компоновки компонента. В настоящее время я сталкиваюсь с проблемой, что, когда пользователь масштабирует окно, FormItem не удается автоматически изменить размер экрана. Поэтому я хочу сделать FormItem гибким, когда пользователь масштабирует окно broswer, FormItem автоматическая перестановка может быть многострочной, чтобы соответствовать изменению экрана автоматически. Это текущий код, который я использую:

 renderSimpleForm() {  const {  form,  dispatch,  loading,  activityM: { wordItems = [] },  activityM,  } = this.props;  const { getFieldDecorator } = form;  const {  formValues: { goodWord },  } = this.state;     return (  lt;Form onSubmit={this.handleSearch} layout="inline"gt;  lt;Row gutter={16} justify="start"gt;  lt;Col md={5} sm={24}gt;  lt;FormItem label="create date："gt;  {getFieldDecorator('activityCreateTime', {  })(lt;RangePicker className={styles.rangepicker} format={dateFormat} /gt;)}  lt;/FormItemgt;  lt;/Colgt;  lt;Col md={5} sm={24}gt;  lt;FormItem label="activity date："gt;  {getFieldDecorator('activityTime', {  })(lt;RangePicker className={styles.rangepicker} format={dateFormat} /gt;)}  lt;/FormItemgt;  lt;/Colgt;  lt;Col md={3} sm={24}gt;  lt;FormItem label="activity status:"gt;  {getFieldDecorator('activityStatus', {  initialValue: '',  })(  lt;Select placeholder="please choose" style={{ width: 85 }} onSelect={this.onChoseHouse}gt;  lt;Option value=""gt;alllt;/Optiongt;  {getSelectOptionByArr(questionType)}  lt;/Selectgt;  )}  lt;/FormItemgt;  lt;/Colgt;  lt;Col md={4} sm={24}gt;  lt;FormItem label="user："gt;  {getFieldDecorator('name', {  initialValue: this.state.formValues.name,  rules: [{ required: false }],  })(lt;Input type="text" placeholder="creator" /gt;)}  lt;/FormItemgt;  lt;/Colgt;  lt;Col md={2} sm={20}gt;  lt;Button type="primary" shape="round" htmlType="submit" className="fun-button"gt;  search  lt;/Buttongt;  lt;/Colgt;  lt;/Rowgt;  lt;/Formgt;  );  }  

что я должен сделать, чтобы сделать FormItem элементы гибкими?

Я определяю разный размер с помощью разных устройств прямо сейчас, вот так, с каждым кольцом:

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