wox-admin-query-form

basic react component

Usage no npm install needed!

<script type="module">
  import woxAdminQueryForm from 'https://cdn.skypack.dev/wox-admin-query-form';
</script>

README

Query Form image

表单参数联动高阶组件

API

属性 说明 类型 默认值
handleHocSubmit 将请求数据拼接到 URL Function 无

Usage

详情案例请看 app.js

import woxAdminQueryFrom from 'wox-admin-query-form';

class ProductList extends Component {
  handleSubmit = (values) => {
    this.props.handleHocSubmit(Object.assign({},...values,));    // 高阶组件内部方法 将请求数据拼接到 URL
  }

   return (
     const { name } = this.props;    //从高阶组件 woxAdminQueryFrom 拿到URL 的参数

      <Form onSubmit={this.handleSubmit} style={{paddingTop: '20px'}}>
        <Row>
          <Col span={8}>
            <FormItem
              {...formItemLayout}
              label="名字"
            >
              {
                getFieldDecorator('name', {
                  initialValue: name || ''
                })(
                  <Input />
                )
              }
            </FormItem>
          </Col>
        </Row>
        <Row span={8}>
          <Button type="primary" htmlType="submit">搜索</Button>
        </Row>
      </Form>
    );
}

const QueryForm = woxAdminQueryFrom(Form);   //使用高阶组件包裹
export default QueryForm;