不使用Form表单实现页面查询重置功能

  问题描述： 

       因为有些页面中的查询选择框太多了，所以要求在这些页面上添加重置按钮

       选择框使用的是antd的Select组件，antd的组件好用是好用，但是密闭性太强了，想要根据需求自定义就会变得很困难

       其中Select组件中占用了value这个属性，将其定义为：指定当前选中的条目

       这就带来一个问题，原本初始时我设置了placeholder，给出提示信息，结果现在直接就显示下拉框中的第一条信息。

       我准备使用点击Button之后onClick时调用函数使state变为空。

       修改state时，必须使用value；而我不希望在重置之后或是一开始进入页面时就选中当前条目。这就陷入了死循环

       期间还有this.state中的值不仅有内容信息还附有其编号，用于在后端传入的信息进行匹配。于是又重新设置一个变量，再赋值使其显示时只有内容信息。

       反正就是与空气斗智斗勇

 

解决方法：

      最后问了师傅，师傅说可以使用key值来进行重置，让其重新进行渲染一个组件。利用React本身的机制来弥补antd的不可控性。

 

构造函数：

constructor(props) {
        super(props)
        this.state = {
            ...
            num: ''
        }
    }

 

按钮：

<Button    
    ...
    onClick={this.resetInputInfo.bind(this)}
>
    重置
</Button>

 

resetInputInfo函数：

resetInputInfo() {
        this.setState(() => ({
            ...
            num: new Date()
        }))
}

使用new Date( )，每次都会返回一个当前的时间，而当前时间是不一样的，返回的key值都不一样，这样就可以让其重新进行渲染新组件。