自定义了一个表单元素，其他正常，在调用resetFields的时候其他表单元素能正常重置，自定义的无法重置，请问要怎么样才能和其他表单元素一样重置

import React from 'react'
import {Input, Button, Icon} from 'antd'

class QueryInput extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }

    componentWillMount() {
        if (this.props.value) {
            this.setState({
                value: this.props.value,
            });
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.value) {
            this.setState({
                value: nextProps.value,
            });
        }
    }

    triggerChange = (value) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange
        if (onChange) {
            onChange(value)
        }
    }

    onChange = (e) => {
        const value = e.target.value
        this.setState({ value })
        this.triggerChange(value)
    }

    clear = () => {
        this.setState({ value: '' })
        this.triggerChange('')
    }

    

    render() {
        const {
            value: defaultValue,
            disabled,
            placeholder,
            size,
            width,
            onPressEnter,
            type,
            className,
            style
        } = this.props
        return (
            <Input
                type={ type || 'text' }
                onChange={ this.onChange }
                defaultValue={ defaultValue }
                value={ this.state.value }
                placeholder={placeholder}
                disabled={ disabled }
                onPressEnter={ onPressEnter }
                style={ style || { width: '140px' } }
                className={ className }
                size={ size || 'default' }
                suffix={ <Icon type='close' style={{ cursor: 'pointer' }} onClick={ this.clear } /> }
            />
        )
    }
}

export default QueryInput