Javascript 如何将其绑定到ES6 getter和setter函数？

当我们想从ES6函数内部使用

这个

时，我们需要在构造函数中这样说

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
            component. We can now access props, states, and refs
            because we declared 'this.myFunc = this.myFunc.bind(this);'
            in the constructor.
        */
     }
}

但是有getter函数，我不能使用与常规函数相同的函数绑定“语法”：

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 component itself.
   */
}

正如我所说，构造函数中的绑定值（）不起作用：

    constructor(){
       super();
       this.myFunc = this.myFunc.bind(this); // This works. It's a regular function.
       this.value = this.value.bind(this); 
       /* No compilation errors for this code, but it doesn't work. The 'this'
          inside the get value() function is still not the component.
       */


       this.state = {}; 
       /* as suggested, but this.state is still undefined from
          inside get value().
       */
    }

我不能像使用常规函数那样在getter函数上使用箭头函数

我们如何将getter（也可能是setter）函数绑定到组件，以便其中的“this”引用组件？尽可能地，我不想使用

React.createClass（{}）

“语法”。如果我不得不回到createClass的方式，那么如果我们不能通过“this”访问组件，那么在ES6中编写getter和setter函数有什么意义呢

用法这是parentcomponent.js

@import React from 'react';
@import { MyComponent } from './mycomponent.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-component">
                  <span onClick={this.clickMe}>Click Me</span>
                  <MyComponent ref="myComponent" />
             </div>
        );
     }
}

@从“React”导入React；
@从“./MyComponent.js”导入{MyComponent}；
导出类ParentComponent扩展了React.Component{
点击我=（）=>{
log（this.refs.myComponent.value）；
/*
不返回任何内容，因为get值（）
MyComponent的函数无法访问其状态，
道具等。
*/
}
render（）{
返回(
点击我
);
}
}

以下是

此状态的问题。

初始化。实际上，在getter中，您使用的是

this.state。其中一个MYVALUES

但未定义此.state

然后，解决方案是在组件的构造函数中声明

this.state={}

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 = {} ; //⚠️
}

constructor（）{
超级（）；
this.myFunc=this.myFunc.bind（this）；//这个有效。它是一个常规函数。
//this.value=this.value.bind（this）；看起来您的父组件的“clickMe”处理程序没有绑定到其实例“this”

您可以在此处执行此操作：

单击我

到

单击我

也可以在ParentComponent的构造函数中执行此操作：

@Felix Kling的JSFIDLE说明了这一点，他说他的代码可以工作。他绑定了clickMe，因此它可以工作。
如果上面的代码不能工作，也许你应该删除它。

如果它实际工作的话？我在构造函数中做了这个。state={}。我仍然得到“this.state是未定义的”。我更新了我的问题。嗯……你如何使用

值

？我不可能让

此

不引用组件。请提供一个。我只是将此组件导入到父组件中，但甚至没有将其放在父组件的JSX上。我这样做是为了在父组件函数中，我可以简单地通过this.refs.myComponentRef.value将值从MyComponent中提取出来，而不是从子组件到父组件的事件处理。

这当然应该引用组件实例。不可能（很容易）将getter与其“主机对象”分开。同样，请提供一个完整的示例来重现问题。正如前面所说的，只要将问题导入到任何组件中，而不是放入父组件的JSX中，这段代码就会重现问题。我只能想象，您实际上传递的不是组件的实例，而是组件描述符。正如我反复说过的，它如果您提供一个完整的示例，会容易得多。您是说您发布的代码已经存在问题，但您没有访问
值
任何地方，因此这不是真的。我们只是想帮助您，但您让它变得困难：-/
get value(){
   console.log(this.constructor.name) //Looks like your ParentComponent's 'clickMe' handler is not bound to its instance 'this'. 


You can either do it here:


<span onClick={this.clickMe}>Click Me</span>


to


<span onClick={this.clickMe
.bind(this)
}>Click Me</span>


OR you can do it in the ParentComponent's constructor:


export class ParentComponent extends React.Component {
  constructor(props){
    super(props);
    this.clickMe = this.clickMe.bind(this);
  }
  ...
}