admin管理员组文章数量:1312678
When we want to use this from inside an ES6 function, we need to say so in the constructor.
export class MyComponent extends React.Component {
constructor(){
super();
this.myFunc = this.myFunc.bind(this);
}
myFunc(){
/*
Now inside this function, this is now referring to our
ponent. We can now access props, states, and refs
because we declared 'this.myFunc = this.myFunc.bind(this);'
in the constructor.
*/
}
}
But there are getter functions, and I cannot use the same function binding "syntax" as I do with regular functions:
get value(){
return this.state.oneOfMyValues;
/*
The above does not work. this.state is undefined, so is .refs,
so is .props, because 'this' is not the ponent itself.
*/
}
As I've said, binding value() in the constructor doesn't work:
constructor(){
super();
this.myFunc = this.myFunc.bind(this); // This works. It's a regular function.
this.value = this.value.bind(this);
/* No pilation errors for this code, but it doesn't work. The 'this'
inside the get value() function is still not the ponent.
*/
this.state = {};
/* as suggested, but this.state is still undefined from
inside get value().
*/
}
I cannot use arrow functions on a getter function like I can with a regular function.
HOW do we bind a getter (and probably also a setter) function to the ponent so that the 'this' inside it refers to the ponent? As much as possible, I don't want to use React.createClass({}) "syntax". If I have to go back to the createClass way, what is the point of being able to write getter and setter functions in ES6 if we don't have access to our ponent via 'this'?
Usage This is parentponent.js
@import React from 'react';
@import { MyComponent } from './myponent.js';
export class ParentComponent extends React.Component {
clickMe = () => {
console.log(this.refs.myComponent.value);
/*
Does not return anything because the get value()
function of MyComponent has no access to its state,
props, etc.
*/
}
render(){
return(
<div className="parent-ponent">
<span onClick={this.clickMe}>Click Me</span>
<MyComponent ref="myComponent" />
</div>
);
}
}
When we want to use this from inside an ES6 function, we need to say so in the constructor.
export class MyComponent extends React.Component {
constructor(){
super();
this.myFunc = this.myFunc.bind(this);
}
myFunc(){
/*
Now inside this function, this is now referring to our
ponent. We can now access props, states, and refs
because we declared 'this.myFunc = this.myFunc.bind(this);'
in the constructor.
*/
}
}
But there are getter functions, and I cannot use the same function binding "syntax" as I do with regular functions:
get value(){
return this.state.oneOfMyValues;
/*
The above does not work. this.state is undefined, so is .refs,
so is .props, because 'this' is not the ponent itself.
*/
}
As I've said, binding value() in the constructor doesn't work:
constructor(){
super();
this.myFunc = this.myFunc.bind(this); // This works. It's a regular function.
this.value = this.value.bind(this);
/* No pilation errors for this code, but it doesn't work. The 'this'
inside the get value() function is still not the ponent.
*/
this.state = {};
/* as suggested, but this.state is still undefined from
inside get value().
*/
}
I cannot use arrow functions on a getter function like I can with a regular function.
HOW do we bind a getter (and probably also a setter) function to the ponent so that the 'this' inside it refers to the ponent? As much as possible, I don't want to use React.createClass({}) "syntax". If I have to go back to the createClass way, what is the point of being able to write getter and setter functions in ES6 if we don't have access to our ponent via 'this'?
Usage This is parentponent.js
@import React from 'react';
@import { MyComponent } from './myponent.js';
export class ParentComponent extends React.Component {
clickMe = () => {
console.log(this.refs.myComponent.value);
/*
Does not return anything because the get value()
function of MyComponent has no access to its state,
props, etc.
*/
}
render(){
return(
<div className="parent-ponent">
<span onClick={this.clickMe}>Click Me</span>
<MyComponent ref="myComponent" />
</div>
);
}
}
-
1
Uh... how are you using
value? I should be impossible forthisnot to refer to the ponent. Please provide a minimal reproducible example. – Felix Kling Commented Mar 6, 2017 at 14:06 - I'm only importing this ponent into a parent ponent, but not even putting it on that parent ponent's JSX. I am doing this so that in a parent ponent functions, I can simply extract the value out of MyComponent via this.refs.myComponentRef.value instead of event handling from child to parent ponent. – Mickael Caruso Commented Mar 6, 2017 at 14:51
-
1
thisshould certainly refer to the ponent instance. It's not (easily) possible to separate a getter from its "host object". Again, please provide a plete example that reproduces the issue. – Felix Kling Commented Mar 6, 2017 at 15:58 - As said, this EXACT code will reproduce the issue as long as it's imported to any ponent, not even put in that parent ponent's JSX! – Mickael Caruso Commented Mar 7, 2017 at 11:59
-
I can only imagine that you are not actually passing an instance of the ponent, but only the ponent descriptor. As I said repeatedly, it would be a lot easier if you provide a plete example. You are saying that the code you posted already has the issue, but your not accessing
valueanywhere, so that's not true. We are just trying to help you but you are making it difficult :-/ – Felix Kling Commented Mar 7, 2017 at 15:13
2 Answers
Reset to default 3Following your ment, it is an issue of this.state initialisation . Indeed , in the getter, you are using this.state. oneOfMyValues however this.state is not defined .
Then , the solution is to declare this.state = {} inside the constructor of ponent.
constructor(){
super();
this.myFunc = this.myFunc.bind(this); // This works. It's a regular function.
// this.value = this.value.bind(this); <-- NO NEED
this.state = {} ; //⚠️
}
For the binding, you can log the this.constructor inside getter and you will be sure that getters and setters does not require manual binding.
get value(){
console.log(this.constructor.name) //
本文标签：
javascriptHow to bind this to React ES6 getter and setter functionsStack Overflow
版权声明：本文标题：javascript - How to bind this to React ES6 getter and setter functions? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.betaflare.com/web/1741888810a2403181.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论