style: enable react/jsx-no-bind

.eslintrc.json

@@ -31,7 +31,6 @@
     "react/prefer-es6-class": 0,
     "react/prefer-stateless-function": 0,
     "react/jsx-closing-bracket-location": 0,
-    "react/jsx-no-bind": 0,
     "no-param-reassign": 0,
     "no-return-assign": 0,
     "max-len": 0,

components/checkbox/Group.jsx

@@ -63,7 +63,7 @@ export default class CheckboxGroup extends React.Component {
           options.map(option =>
             <Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
               checked={this.state.value.indexOf(option.value) !== -1}
-              onChange={this.toggleOption.bind(this, option)}
+              onChange={() => this.toggleOption(option)}
               className="ant-checkbox-group-item" key={option.value}>
               {option.label}
             </Checkbox>

components/date-picker/demo/start-end.md

@@ -34,17 +34,23 @@ const DateRange = React.createClass({
       [field]: value,
     });
   },
+  onStartChange(value) {
+    this.onChange('startValue', value);
+  },
+  onEndChange(value) {
+    this.onChange('endValue', value);
+  },
   render() {
     return (
       <div>
         <DatePicker disabledDate={this.disabledStartDate}
           value={this.state.startValue}
           placeholder="开始日期"
-          onChange={this.onChange.bind(this, 'startValue')} />
+          onChange={this.onStartChange} />
         <DatePicker disabledDate={this.disabledEndDate}
           value={this.state.endValue}
           placeholder="结束日期"
-          onChange={this.onChange.bind(this, 'endValue')} />
+          onChange={this.onEndChange} />
       </div>
     );
   }

components/date-picker/demo/with-time-picker.md

@@ -36,11 +36,17 @@ const DateTimePicker = React.createClass({
       this.props.onSelect(this.result);
     }
   },
+  handleDateChange(value) {
+    this.handleChange('date', value);
+  },
+  handleTimeChange(value) {
+    this.handleChange('time', value);
+  },
   render() {
     return (
       <div>
-        <DatePicker onChange={this.handleChange.bind(null, 'date')} />
-        <TimePicker onChange={this.handleChange.bind(null, 'time')} />
+        <DatePicker onChange={this.handleDateChange} />
+        <TimePicker onChange={this.handleTimeChange} />
       </div>
     );
   }

components/form/demo/validate-basic.md

@@ -15,7 +15,7 @@ function noop() {
   return false;
 }
 
-class BasicDemo extends React.Component {
+let BasicDemo = React.createClass({
   getValidateStatus(field) {
     const { isFieldValidating, getFieldError, getFieldValue } = this.props.form;
 
@@ -26,12 +26,12 @@ class BasicDemo extends React.Component {
     } else if (getFieldValue(field)) {
       return 'success';
     }
-  }
+  },
 
   handleReset(e) {
     e.preventDefault();
     this.props.form.resetFields();
-  }
+  },
 
   handleSubmit(e) {
     e.preventDefault();
@@ -43,7 +43,7 @@ class BasicDemo extends React.Component {
       console.log('Submit!!!');
       console.log(values);
     });
-  }
+  },
 
   userExists(rule, value, callback) {
     if (!value) {
@@ -57,7 +57,7 @@ class BasicDemo extends React.Component {
         }
       }, 800);
     }
-  }
+  },
 
   checkPass(rule, value, callback) {
     const { validateFields } = this.props.form;
@@ -65,7 +65,7 @@ class BasicDemo extends React.Component {
       validateFields(['rePasswd'], { force: true });
     }
     callback();
-  }
+  },
 
   checkPass2(rule, value, callback) {
     const { getFieldValue } = this.props.form;
@@ -74,7 +74,7 @@ class BasicDemo extends React.Component {
     } else {
       callback();
     }
-  }
+  },
 
   render() {
     const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
@@ -100,7 +100,7 @@ class BasicDemo extends React.Component {
     const passwdProps = getFieldProps('passwd', {
       rules: [
         { required: true, whitespace: true, message: '请填写密码' },
-        { validator: this.checkPass.bind(this) },
+        { validator: this.checkPass },
       ],
     });
     const rePasswdProps = getFieldProps('rePasswd', {
@@ -109,7 +109,7 @@ class BasicDemo extends React.Component {
         whitespace: true,
         message: '请再次输入密码',
       }, {
-        validator: this.checkPass2.bind(this),
+        validator: this.checkPass2,
       }],
     });
     const textareaProps = getFieldProps('textarea', {
@@ -161,14 +161,14 @@ class BasicDemo extends React.Component {
         </FormItem>
 
         <FormItem wrapperCol={{ span: 12, offset: 7 }}>
-          <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
+          <Button type="primary" onClick={this.handleSubmit}>确定</Button>
           &nbsp;&nbsp;&nbsp;
-          <Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
+          <Button type="ghost" onClick={this.handleReset}>重置</Button>
         </FormItem>
       </Form>
     );
-  }
-}
+  },
+});
 
 BasicDemo = createForm()(BasicDemo);
 

components/table/index.jsx

@@ -314,7 +314,7 @@ let Table = React.createClass({
     }
     return (
       <Radio disabled={props.disabled}
-        onChange={this.handleRadioSelect.bind(this, record, rowIndex)}
+        onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
         value={rowIndex} checked={checked} />
     );
   },
@@ -334,7 +334,7 @@ let Table = React.createClass({
     }
     return (
       <Checkbox checked={checked} disabled={props.disabled}
-        onChange={this.handleSelect.bind(this, record, rowIndex)} />
+        onChange={(e) => this.handleSelect(record, rowIndex, e)} />
     );
   },
 
@@ -444,12 +444,12 @@ let Table = React.createClass({
           <div className="ant-table-column-sorter">
             <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
               title="↑"
-              onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
+              onClick={() => this.toggleSortOrder('ascend', column)}>
               <Icon type="caret-up" />
             </span>
             <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
               title="↓"
-              onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
+              onClick={() => this.toggleSortOrder('descend', column)}>
               <Icon type="caret-down" />
             </span>
           </div>

components/tabs/index.jsx

@@ -49,7 +49,7 @@ export default class Tabs extends React.Component {
         return cloneElement(child, {
           tab: <div>
             {child.props.tab}
-            <Icon type="cross" onClick={this.removeTab.bind(this, child.key)} />
+            <Icon type="cross" onClick={(e) => this.removeTab(child.key, e)} />
           </div>,
           key: child.key || index,
         });

components/tag/demo/control.md

@@ -36,7 +36,7 @@ const App = React.createClass({
     return (
       <div>
         {this.state.tags.map(tag =>
-          <Tag key={tag.key} closable afterClose={this.handleClose.bind(this, tag.key)}>{tag.name}</Tag>
+          <Tag key={tag.key} closable afterClose={() => this.handleClose(tag.key)}>{tag.name}</Tag>
         )}
         <div>
           <Button onClick={this.addTag}>添加标签</Button>

components/transfer/index.jsx

@@ -95,6 +95,9 @@ export default class Transfer extends React.Component {
     this.props.onChange(newTargetKeys, direction, moveKeys);
   }
 
+  moveToLeft = () => this.moveTo('left')
+  moveToRight = () => this.moveTo('right')
+
   getGlobalCheckStatus(direction) {
     const { leftDataSource, rightDataSource } = this.splitDataSource();
     const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state;
@@ -144,6 +147,9 @@ export default class Transfer extends React.Component {
     });
   }
 
+  handleLeftSelectAll = () => this.handleSelectAll('left')
+  handleRightSelectAll = () => this.handleSelectAll('right')
+
   handleFilter = (direction, e) => {
     this.setState({
       // deselect all
@@ -153,12 +159,18 @@ export default class Transfer extends React.Component {
     });
   }
 
+  handleLeftFilter = (e) => this.handleFilter('left', e)
+  handleRightFilter = (e) => this.handleFilter('right', e)
+
   handleClear = (direction) => {
     this.setState({
       [`${direction}Filter`]: '',
     });
   }
 
+  handleLeftClear = () => this.handleClear('left')
+  handleRightClear = () => this.handleClear('right')
+
   handleSelect = (direction, selectedItem, checked) => {
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
     const holder = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
@@ -179,6 +191,9 @@ export default class Transfer extends React.Component {
     });
   }
 
+  handleLeftSelect = (selectedItem, checked) => this.handleSelect('left', selectedItem, checked);
+  handleRightSelect = (selectedItem, checked) => this.handleSelect('right', selectedItem, checked);
+
   render() {
     const {
       prefixCls, titles, operations, showSearch, notFoundContent,
@@ -206,10 +221,10 @@ export default class Transfer extends React.Component {
           style={listStyle}
           checkedKeys={leftCheckedKeys}
           checkStatus={leftCheckStatus}
-          handleFilter={this.handleFilter.bind(this, 'left')}
-          handleClear={this.handleClear.bind(this, 'left')}
-          handleSelect={this.handleSelect.bind(this, 'left')}
-          handleSelectAll={this.handleSelectAll.bind(this, 'left')}
+          handleFilter={this.handleLeftFilter}
+          handleClear={this.handleLeftClear}
+          handleSelect={this.handleLeftSelect}
+          handleSelectAll={this.handleLeftSelectAll}
           position="left"
           render={this.props.render}
           showSearch={showSearch}
@@ -220,10 +235,10 @@ export default class Transfer extends React.Component {
           prefixCls={`${prefixCls}-list`} />
         <Operation rightActive={rightActive}
           rightArrowText={operations[0]}
-          moveToRight={this.moveTo.bind(this, 'right')}
+          moveToRight={this.moveToRight}
           leftActive={leftActive}
           leftArrowText={operations[1]}
-          moveToLeft={this.moveTo.bind(this, 'left')}
+          moveToLeft={this.moveToLeft}
           className={`${prefixCls}-operation`} />
         <List titleText={titles[1]}
           dataSource={rightDataSource}
@@ -231,10 +246,10 @@ export default class Transfer extends React.Component {
           style={listStyle}
           checkedKeys={rightCheckedKeys}
           checkStatus={rightCheckStatus}
-          handleFilter={this.handleFilter.bind(this, 'right')}
-          handleClear={this.handleClear.bind(this, 'right')}
-          handleSelect={this.handleSelect.bind(this, 'right')}
-          handleSelectAll={this.handleSelectAll.bind(this, 'right')}
+          handleFilter={this.handleRightFilter}
+          handleClear={this.handleRightClear}
+          handleSelect={this.handleRightSelect}
+          handleSelectAll={this.handleRightSelectAll}
           position="right"
           render={this.props.render}
           showSearch={showSearch}

components/upload/uploadList.jsx

@@ -95,9 +95,9 @@ export default class UploadList extends React.Component {
               ? (
                 <span>
                   <a href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }}><Icon type="eye-o" /></a>
-                  <Icon type="delete" onClick={this.handleClose.bind(this, file)} />
+                  <Icon type="delete" onClick={() => this.handleClose(file)} />
                 </span>
-              ) : <Icon type="cross" onClick={this.handleClose.bind(this, file)} />
+              ) : <Icon type="cross" onClick={() => this.handleClose(file)} />
             }
           </div>
           { progress }