Remove manual binding for 'this'.

Use ES7 style class members for event handlers so that 'this' is
automatically bound and each definition site doesn't need to manually
invoke 'bind'.

This makes all existing ES2015 class usages in components use the
same mechanism for binding.

components/button/button.jsx

@@ -30,7 +30,7 @@ function clearButton(button) {
 }
 
 export default class Button extends React.Component {
-  handleClick(...args) {
+  handleClick = (...args) => {
     // Add click effect
     const buttonNode = findDOMNode(this);
     clearButton(buttonNode);
@@ -66,7 +66,7 @@ export default class Button extends React.Component {
       <button {...others}
         type={htmlType || 'button'}
         className={classes}
-        onClick={this.handleClick.bind(this)}>
+        onClick={this.handleClick}>
         {icon ? <Icon type={icon} /> : null}{kids}
       </button>
     );

components/calendar/Header.jsx

@@ -23,7 +23,7 @@ export default class Header extends React.Component {
         dropdownMatchSelectWidth={false}
         dropdownMenuStyle={{ minWidth: 103 }}
         className={`${prefixCls}-year-select`}
-        onChange={this.onYearChange.bind(this)}
+        onChange={this.onYearChange}
         value={String(year)}>
         { options }
       </Select>
@@ -47,23 +47,23 @@ export default class Header extends React.Component {
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-month-select`}
         value={String(month)}
-        onChange={this.onMonthChange.bind(this)}>
+        onChange={this.onMonthChange}>
         { options }
       </Select>
     );
   }
-  onYearChange(year) {
+  onYearChange = (year) => {
     const newValue = this.props.value.clone();
     newValue.setYear(parseInt(year, 10));
     this.props.onValueChange(newValue);
   }
 
-  onMonthChange(month) {
+  onMonthChange = (month) => {
     const newValue = this.props.value.clone();
     newValue.setMonth(parseInt(month, 10));
     this.props.onValueChange(newValue);
   }
-  onTypeChange(e) {
+  onTypeChange = (e) => {
     this.props.onTypeChange(e.target.value);
   }
   render() {
@@ -71,7 +71,7 @@ export default class Header extends React.Component {
     const yearSelect = this.getYearSelectElement(value.getYear());
     const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
     const typeSwitch = (
-      <Group onChange={this.onTypeChange.bind(this)} value={type}>
+      <Group onChange={this.onTypeChange} value={type}>
         <Button value="date">{locale.month}</Button>
         <Button value="month">{locale.year}</Button>
       </Group>

components/calendar/index.jsx

@@ -32,7 +32,7 @@ export default class Calendar extends React.Component {
       });
     }
   }
-  monthCellRender(value, locale) {
+  monthCellRender = (value, locale) => {
     const prefixCls = this.props.prefixCls;
     const month = value.getMonth();
     return (
@@ -46,7 +46,7 @@ export default class Calendar extends React.Component {
       </div>
     );
   }
-  dateCellRender(value) {
+  dateCellRender = (value) => {
     const prefixCls = this.props.prefixCls;
     return (
       <div className={`${prefixCls}-date`}>
@@ -59,13 +59,13 @@ export default class Calendar extends React.Component {
       </div>
     );
   }
-  setValue(value) {
+  setValue = (value) => {
     if (!('value' in this.props) && this.state.value !== value) {
       this.setState({ value });
     }
     this.props.onPanelChange(value, this.state.mode);
   }
-  setType(type) {
+  setType = (type) => {
     const mode = (type === 'date') ? 'month' : 'year';
     if (this.state.mode !== mode) {
       this.setState({ mode });
@@ -91,8 +91,8 @@ export default class Calendar extends React.Component {
           value={value}
           locale={locale.lang}
           prefixCls={prefixCls}
-          onTypeChange={this.setType.bind(this)}
-          onValueChange={this.setValue.bind(this)} />
+          onTypeChange={this.setType}
+          onValueChange={this.setValue} />
         <FullCalendar
           {...props}
           Select={noop}
@@ -101,8 +101,8 @@ export default class Calendar extends React.Component {
           prefixCls={prefixCls}
           showHeader={false}
           value={value}
-          monthCellRender={this.monthCellRender.bind(this)}
-          dateCellRender={this.dateCellRender.bind(this)} />
+          monthCellRender={this.monthCellRender}
+          dateCellRender={this.dateCellRender} />
       </div>
     );
   }

components/cascader/index.jsx

@@ -12,27 +12,20 @@ export default class Cascader extends React.Component {
       value: props.value || props.defaultValue || [],
       popupVisible: false,
     };
-    [
-      'handleChange',
-      'handlePopupVisibleChange',
-      'setValue',
-      'getLabel',
-      'clearSelection',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({ value: nextProps.value || [] });
     }
   }
-  handleChange(value, selectedOptions) {
+  handleChange = (value, selectedOptions) => {
     this.setValue(value, selectedOptions);
   }
-  handlePopupVisibleChange(popupVisible) {
+  handlePopupVisibleChange = (popupVisible) => {
     this.setState({ popupVisible });
     this.props.onPopupVisibleChange(popupVisible);
   }
-  setValue(value, selectedOptions = []) {
+  setValue = (value, selectedOptions = []) => {
     if (!('value' in this.props)) {
       this.setState({ value });
     }
@@ -44,7 +37,7 @@ export default class Cascader extends React.Component {
       .map(o => o.label);
     return displayRender(label);
   }
-  clearSelection(e) {
+  clearSelection = (e) => {
     e.preventDefault();
     e.stopPropagation();
     this.setValue([]);

components/tabs/index.jsx

@@ -4,25 +4,17 @@ import classNames from 'classnames';
 import Icon from '../icon';
 
 export default class Tabs extends React.Component {
-  constructor(props) {
-    super(props);
-    [
-      'createNewTab',
-      'removeTab',
-      'handleChange',
-    ].forEach((method) => this[method] = this[method].bind(this));
-  }
-  createNewTab(targetKey) {
+  createNewTab = (targetKey) => {
     this.props.onEdit(targetKey, 'add');
   }
-  removeTab(targetKey, e) {
+  removeTab = (targetKey, e) => {
     e.stopPropagation();
     if (!targetKey) {
       return;
     }
     this.props.onEdit(targetKey, 'remove');
   }
-  handleChange(activeKey) {
+  handleChange = (activeKey) => {
     this.props.onChange(activeKey);
   }
   render() {

components/tag/index.jsx

@@ -14,7 +14,7 @@ export default class Tag extends React.Component {
     };
   }
 
-  close(e) {
+  close = (e) => {
     this.props.onClose(e);
     if (e.defaultPrevented) return;
     const dom = ReactDOM.findDOMNode(this);
@@ -26,7 +26,7 @@ export default class Tag extends React.Component {
     });
   }
 
-  animationEnd(key, existed) {
+  animationEnd = (key, existed) => {
     if (!existed) {
       this.setState({
         closed: true,
@@ -38,7 +38,7 @@ export default class Tag extends React.Component {
 
   render() {
     const { prefixCls, closable, color, className, children, ...restProps } = this.props;
-    const close = closable ? <Icon type="cross" onClick={this.close.bind(this)} /> : '';
+    const close = closable ? <Icon type="cross" onClick={this.close} /> : '';
     const classString = classNames({
       [prefixCls]: true,
       [`${prefixCls}-${color}`]: !!color,
@@ -50,7 +50,7 @@ export default class Tag extends React.Component {
         showProp="data-show"
         transitionName={`${prefixCls}-zoom`}
         transitionAppear
-        onEnd={this.animationEnd.bind(this)}>
+        onEnd={this.animationEnd}>
         {this.state.closed ? null : (
           <div data-show={!this.state.closing} {...restProps} className={classString}>
             <span className={`${prefixCls}-text`}>{children}</span>

components/transfer/index.jsx

@@ -44,7 +44,7 @@ export default class Transfer extends React.Component {
     };
   }
 
-  moveTo(direction) {
+  moveTo = (direction) => {
     const { targetKeys } = this.props;
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
     const moveKeys = direction === 'right' ? leftCheckedKeys : rightCheckedKeys;
@@ -96,7 +96,7 @@ export default class Transfer extends React.Component {
     return text.match(regex);
   }
 
-  handleSelectAll(direction) {
+  handleSelectAll = (direction) => {
     const { leftDataSource, rightDataSource } = this.splitDataSource();
     const { leftFilter, rightFilter } = this.state;
     const dataSource = direction === 'left' ? leftDataSource : rightDataSource;
@@ -110,7 +110,7 @@ export default class Transfer extends React.Component {
     });
   }
 
-  handleFilter(direction, e) {
+  handleFilter = (direction, e) => {
     this.setState({
       // deselect all
       [`${direction}CheckedKeys`]: [],
@@ -119,13 +119,13 @@ export default class Transfer extends React.Component {
     });
   }
 
-  handleClear(direction) {
+  handleClear = (direction) => {
     this.setState({
       [`${direction}Filter`]: '',
     });
   }
 
-  handleSelect(direction, selectedItem, checked) {
+  handleSelect = (direction, selectedItem, checked) => {
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
     const holder = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
     let index;

components/transfer/list.jsx

@@ -24,21 +24,21 @@ export default class TransferList extends React.Component {
     }, 0);
   }
 
-  handleSelectAll() {
+  handleSelectAll = () => {
     this.props.handleSelectAll();
   }
 
-  handleSelect(selectedItem) {
+  handleSelect = (selectedItem) => {
     const { checkedKeys } = this.props;
     const result = checkedKeys.some((key) => key === selectedItem.key);
     this.props.handleSelect(selectedItem, !result);
   }
 
-  handleFilter(e) {
+  handleFilter = (e) => {
     this.props.handleFilter(e);
   }
 
-  handleClear() {
+  handleClear = () => {
     this.props.handleClear();
   }
 
@@ -57,7 +57,7 @@ export default class TransferList extends React.Component {
     return (
       <span ref="checkbox"
         className={checkboxCls}
-        onClick={(!props.disabled) && this.handleSelectAll.bind(this)}>
+        onClick={(!props.disabled) && this.handleSelectAll}>
         {customEle}
       </span>
     );
@@ -90,7 +90,7 @@ export default class TransferList extends React.Component {
     }).map((item) => {
       const renderedText = this.props.render(item);
       return (
-        <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
+        <li onClick={() => { this.handleSelect(item); }} key={item.key} title={renderedText}>
           <Checkbox checked={checkedKeys.some(key => key === item.key)} />
           {renderedText}
         </li>
@@ -131,8 +131,8 @@ export default class TransferList extends React.Component {
         <div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
           { showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
             <Search prefixCls={`${prefixCls}-search`}
-              onChange={this.handleFilter.bind(this)}
-              handleClear={this.handleClear.bind(this)}
+              onChange={this.handleFilter}
+              handleClear={this.handleClear}
               placeholder={searchPlaceholder || '请输入搜索内容'}
               value={filter} />
           </div> : null }

components/transfer/search.jsx

@@ -4,11 +4,11 @@ function noop() {
 }
 
 export default class Search extends React.Component {
-  handleChange(e) {
+  handleChange = (e) => {
     this.props.onChange(e);
   }
 
-  handleClear(e) {
+  handleClear = (e) => {
     e.preventDefault();
     this.props.handleClear(e);
   }
@@ -18,9 +18,9 @@ export default class Search extends React.Component {
     return (
       <div>
         <input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
-          onChange={this.handleChange.bind(this)} />
+          onChange={this.handleChange} />
         { value && value.length > 0 ?
-          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear.bind(this)}>
+          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear}>
             <Icon type="cross-circle" />
           </a>
           : <span className={ `${prefixCls}-action` }><Icon type="search" /></span>