react antd Input 绑定值

背景

    在页面上做一些搜索条件，为了方便我们可以做一个按钮"置空"，或者清除，点击这个按钮实现将输入框中的值删除，在以前的html页面中我们很方便通过js来将值制空，但是react组件封装的很严重了，我们没有办法通过js来制空，即使可以实现也是比较麻烦的

思考： 

   先来看我的这样的一组代码

1.  
   <Input placeholder="请输入股票代码"
2.  
   maxLength={6}
3.  
   showCount
4.  
   className={stock.search_row_input}
5.  
   onChange={this.changeCode.bind(this)}
6.  
   />

   我们可以在onChange这个事件对应的方法中获取到该输入组件中的值

    但是我们却没有办法动态的改变这个组件中的值

解决办法

1.  
   <Input placeholder="请输入代码"
2.  
   maxLength={6}
3.  
   showCount
4.  
   value={this.state.ccode}
5.  
   className={stock.search_row_input}
6.  
   onChange={this.changeCode.bind(this)}
7.  
   />

在antd 的Input 组件中包含了value 这个属性，我们这一将这个属性绑定一个值

这样我们通过改变这个值的方法，实现将按钮置空

但是仅仅有value这个属性还是不够的

经过测试还需要加上onChange 这个事件，否则我们无法在Input中输入任何的值

这篇好文章是转载于：学新通技术网