使用JS ES6 React antd dva以类组件的形式写一个组件，使用form和input收集数据，可实现的功能是传入数据后，自动生成搜索框，一行最多三个搜索框，父组件传入搜索列数据的名称和类型 使用JS ES6 React antd dva 以类组件的形式写一个组件，使用form和input，可实现的功能是传入列名称后，自动生成搜索框，一行最多三个搜索框，父组件传入搜索列数据的名称和类型

这是一个使用JS ES6、React、antd和dva编写的类组件，可以根据传入的列名称和类型自动生成搜索框，每行最多显示三个框。下面是组件的示例代码：

import React from 'react';
import { Form, Input, Row, Col } from 'antd';

class SearchForm extends React.Component {
  renderSearchInputs = () => {
    const { searchColumns } = this.props;
    const searchInputs = [];

    for (let i = 0; i < searchColumns.length; i++) {
      const column = searchColumns[i];

      const input = (
        <Col span={8} key={i}>
          <Form.Item name={column.name} label={column.label}>
            {column.type === 'text' ? (
              <Input placeholder={`请输入${column.label}`} />
            ) : (
              <Input.Search enterButton placeholder={`请输入${column.label}`} />
            )}
          </Form.Item>
        </Col>
      );

      searchInputs.push(input);
    }

    return searchInputs;
  };

  render() {
    return (
      <Form layout="vertical">
        <Row gutter={16}>{this.renderSearchInputs()}</Row>
      </Form>
    );
  }
}

export default SearchForm;

在父组件中，你可以通过以下方式使用这个搜索框组件：

import React from 'react';
import SearchForm from './SearchForm';

class ParentComponent extends React.Component {
  searchColumns = [
    { name: 'name', label: '姓名', type: 'text' },
    { name: 'age', label: '年龄', type: 'number' },
    { name: 'gender', label: '性别', type: 'text' },
    // 可以根据需要添加更多列
  ];

  render() {
    return <SearchForm searchColumns={this.searchColumns} />;
  }
}

export default ParentComponent;

这样，父组件就会将列名称和类型传递给搜索框组件，并自动生成相应的搜索框。每行最多显示三个搜索框，超过的搜索框会自动换行。你可以根据需要添加更多的列。