react.js - 引入的是antd，高级搜索模块为啥页面不出现效果，不知道怎么改

问题描述

问 题

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../../actions/home';
import {bindThis} from '../../base/common-func';
import {Form, Row, Col, Input, Button, Icon} from 'antd';
import {appHistory} from '../app';
import './search.css'

const FormItem = Form.Item;

class AdvancedSearchForm extends React.Component {
    state = {
        expand: false,
    };

    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
        });
    }
    handleReset = () => {
        this.props.form.resetFields();
    }
    toggle = () => {
        const { expand } = this.state;
        this.setState({ expand: !expand });
    }
    // To generate mock Form.Item
    getFields() {
        const count = this.state.expand ? 10 : 6;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const children = [];
        for (let i = 0; i < 10; i++) {
            children.push(
                <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
                    <FormItem {...formItemLayout} label={`Field ${i}`}>
                        {getFieldDecorator(`field-${i}`)(
                            <Input placeholder="placeholder" />
                        )}
                    </FormItem>
                </Col>
            );
        }
        return children;
    }

    render() {
        return (
            <Form
                className="ant-advanced-search-form"
                onSubmit={this.handleSearch}
            >
                <Row gutter={40}>{this.getFields()}</Row>
                <Row>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Button type="primary" htmlType="submit">Search</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                            Clear
                        </Button>
                        <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                            Collapse <Icon type={this.state.expand ? 'up' : 'down'} />
                        </a>
                    </Col>
                </Row>
            </Form>
        );
    }
}

const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);
ReactDOM.render(
    <div>
        <WrappedAdvancedSearchForm />
        <div className="search-result-list">Search Result List</div>
    </div>,
    mountNode
);



export default connect(
    state => ({
        home: state.home
    }),
    dispatch => ({actions: bindActionCreators(Actions, dispatch)})
)(CustomerManagement)

解决方案

import ReactDOM from 'react-dom'
是不是还要引个这个。

---

1.import es模块化标准
2.ReactDOM.render()接受两个参数。具体的去查文档。

这篇关于react.js - 引入的是antd，高级搜索模块为啥页面不出现效果，不知道怎么改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！