From 71594b0e5c183ef3d47ab7dd2029ce1b6ea9259f Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Wed, 23 Mar 2016 18:50:44 +0700 Subject: [PATCH] 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 | 4 ++-- components/calendar/Header.jsx | 12 ++++++------ components/calendar/index.jsx | 16 ++++++++-------- components/cascader/index.jsx | 15 ++++----------- components/tabs/index.jsx | 14 +++----------- components/tag/index.jsx | 8 ++++---- components/transfer/index.jsx | 10 +++++----- components/transfer/list.jsx | 16 ++++++++-------- components/transfer/search.jsx | 8 ++++---- 9 files changed, 44 insertions(+), 59 deletions(-) diff --git a/components/button/button.jsx b/components/button/button.jsx index 37551dd343..f3ada5fd15 100644 --- a/components/button/button.jsx +++ b/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 { ); diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx index 88e46f1ef4..2203c0891a 100644 --- a/components/calendar/Header.jsx +++ b/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 } @@ -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 } ); } - 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 = ( - + diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index 2a5a68e370..ad1efe4269 100644 --- a/components/calendar/index.jsx +++ b/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 { ); } - dateCellRender(value) { + dateCellRender = (value) => { const prefixCls = this.props.prefixCls; return (
@@ -59,13 +59,13 @@ export default class Calendar extends React.Component {
); } - 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} /> + monthCellRender={this.monthCellRender} + dateCellRender={this.dateCellRender} /> ); } diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index b942fff437..1bec9ec841 100644 --- a/components/cascader/index.jsx +++ b/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([]); diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx index bcccd42683..0f8e0f6512 100644 --- a/components/tabs/index.jsx +++ b/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() { diff --git a/components/tag/index.jsx b/components/tag/index.jsx index 4986b648c1..247ddfcee7 100644 --- a/components/tag/index.jsx +++ b/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 ? : ''; + const close = closable ? : ''; 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 : (
{children} diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx index 04a0c89213..46a1076fe4 100644 --- a/components/transfer/index.jsx +++ b/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; diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx index c8af0e2a58..dff919a638 100644 --- a/components/transfer/list.jsx +++ b/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 ( + onClick={(!props.disabled) && this.handleSelectAll}> {customEle} ); @@ -90,7 +90,7 @@ export default class TransferList extends React.Component { }).map((item) => { const renderedText = this.props.render(item); return ( -
  • +
  • { this.handleSelect(item); }} key={item.key} title={renderedText}> key === item.key)} /> {renderedText}
    • @@ -131,8 +131,8 @@ export default class TransferList extends React.Component {
    { showSearch ?
    : null } diff --git a/components/transfer/search.jsx b/components/transfer/search.jsx index fe750bafa2..8e81f45091 100644 --- a/components/transfer/search.jsx +++ b/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 (
    + onChange={this.handleChange} /> { value && value.length > 0 ? - + :