Skip to content

Instantly share code, notes, and snippets.

@wwarodom
Last active January 24, 2018 09:49
Show Gist options
  • Save wwarodom/2bb0054fbfe46844a66354cf6482b25f to your computer and use it in GitHub Desktop.
Save wwarodom/2bb0054fbfe46844a66354cf6482b25f to your computer and use it in GitHub Desktop.
react function test
import React, {Component} from 'react';
class Func extends Component {
constructor(props,context) {
super(props,context)
this.f6 = this.f6.bind(this);
}
f1() { console.log('F1' ) }
f2() { console.log('F2') }
f3 = () => { console.log('F3') }
f4 = () => { console.log('F4:' + this.refs.txt4.value) }
f5() { console.log('F5:' + this.refs.txt5.value) }
f6() { console.log('F6' + this.refs.txt6.value) }
f7() { console.log('F7' + this.refs.txt7.value) }
f8(str) { console.log('F8' + str) }
f9(str) { console.log('F9' + str) }
render() {
return (
<div>
<h2>Function test </h2>
Pass f1() to onClick, 'this' is NOT bind
<div>
<input type="text" ref="txt1" defaultValue={'F1 text'} />
<button onClick={this.f1}> F1 </button>
</div>
f2() is called during render process, nothing happen when clicked
<div>
<input type="text" ref="txt2" defaultValue={'F2 text'} />
<button onClick={this.f2()}> F2 </button>
</div>
f3() is called during render process, nothing happen when clicked, 'this' is NOT bind
<div>
<input type="text" ref="txt3" defaultValue={'F3 text'}/>
<button onClick={this.f3()}> F3 </button>
</div>
Pass f4 (point to anonymous function) to on Click, 'this' is bind automatically
<div>
<input type="text" ref="txt4" defaultValue={'F4 text'}/>
<button onClick={this.f4}> F4 </button>
</div>
Pass anonymous object which is consisted of f5(), 'this' is bind automatically
<div>
<input type="text" ref="txt5" defaultValue={'F5 text'}/>
<button onClick={() => this.f5()}> F5 </button>
</div>
Pass f6() to onClick, bind 'this' in constructor
<div>
<input type="text" ref="txt6" defaultValue={'F6 text'} />
<button onClick={this.f6} > F6 </button>
</div>
Pass f7() to onClick, bind 'this' in onClick
<div>
<input type="text" ref="txt7" defaultValue={'F7 text'} />
<button onClick={this.f7.bind(this)}> F7 </button>
</div>
Pass f8() to onClick, bind 'this' in onClick
<div>
<input type="text" ref="txt8" defaultValue={'F8 text'} />
<button onClick={this.f8.bind(this,'Foo')}> F8 </button>
</div>
Pass f9() to onClick, bind 'this' in onClick
<div>
<input type="text" ref="txt9" defaultValue={'F9 text'} />
<button onClick={(e) => this.f9('Bar',e)}> F9 </button>
</div>
</div>
)
}
}
export default Func;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment