HI,
I’m learning the events:
I don’t understand this line, the bind method attach this to update, but this.update are not an argument in the constructor?
I’ll expect in object programming, constructor ( update ) { this.update = …
this.update = this.update.bind(this) //udate method and bind to the context
my all code works well:
import React from 'react'
class SynteticEventSystem extends React.Component {
constructor(){
super()
this.state = { currentEvent: '------' }
this.update = this.update.bind(this) //udate method and bind to the context
}
update(e){
this.setState({currentEvent: e.type});
}
render() {
return (
<div>
<textarea
onKeyPress={this.update}
onCopy={this.update}
onCut={this.update}
onPaste={this.update}
onFocus={this.update}
onBlur={this.update}
onDoubleClick={this.update}
onTouchStart={this.update}
onTouchMove={this.update}
onTouchEnd={this.update}
rows='3'
cols='10' />
<h1> { this.state.currentEvent }</h1>
</div>
);
}
}
export default SynteticEventSystem
Oxyrus
January 5, 2017, 6:47pm
2
The this on your render is some weird thing, that’s why not using bind this will result in a X is undefined.
You can use an arrow function instead
(e) => this.update(e)
Hope that helps .
I’m calling this method in the constructor… I need an identifier.
Oxyrus
January 5, 2017, 7:05pm
4
You can use the arrow function instead of calling it in the constructor.
I’m calling this.update in the html ?
like this?
class UsingRefsToAccessComponents extends React.Component {
constructor(){
super()
this.state = {
a: '---'
}
}
updateMe = (e) => {
this.setState({a: e.target.value});
}
render() {
return (
<div>
<input
type='text'
onChange={this.updateMe.bind(this)}
/>
<h1> { this.state.a } </h1>
</div>
);
}
Oxyrus
January 5, 2017, 7:38pm
7
class UsingRefsToAccessComponents extends React.Component {
constructor(){
super()
this.state = {
a: '---'
}
}
updateMe(e) {
this.setState({a: e.target.value});
}
render() {
return (
<div>
<input
type='text'
onChange={(e) => this.updateMe(e)}
/>
<h1> { this.state.a } </h1>
</div>
);
}
1 Like
I see, it’s weird I have to create a function to call updateMe() :
EDIT: I don’t declare the function with let or const but it works?
class UsingRefsToAccessComponents extends React.Component {
constructor(){
super()
this.state = {
a: '---'
}
}
updateMe = () => {
this.setState({
a: this.refs.a.value,
b: this.refs.b.value
});
}
render() {
return (
<div>
<input
ref='a'
type='text'
onChange={() => this.updateMe()}
/>
{/* onChange={this.updateMe.bind(this)} */}
{ this.state.a }
<hr />
<input
ref='b'
type='text'
onChange={() => this.updateMe()}
/>
{/* onChange={this.updateMe.bind(this)} */}
{ this.state.b }
</div>
);
}
}
export default UsingRefsToAccessComponents
Oxyrus
January 5, 2017, 7:56pm
9
Here is an example, hope it makes it clear.
class App extends Component {
constructor() {
super();
this.state = {
counter = 0
};
}
updateCounter(e) {
this.setState({
counter: counter + 1
});
}
render() {
return (
<div>
<h1>{this.state.counter}</h1>
<button onClick={(e) => this.updateCounter(e)}>Click me!</button>
</div>
);
}
}
1 Like
It was clear the first time, I got it.
Thanks