Merge pull request #1258 from waywardmonkeys/constructor-bind-this

Move binding to the constructor.

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>