Javascript 反应：“；这"；在组件函数中未定义 class PlayerControl扩展了React.Component{ 建造师（道具）{ 超级（道具） 此.state={ 我的回答是：错， shuffleActive:错， } } render（）{ var shuffleClassName=this.state.toggleActive？“玩家控制图标激活”：“玩家控制图标” 返回( ); } OnToggleLop（事件）{ //“这是未定义的？”

有两种方法

一是增加

this.ontogloop=this.ontogloop.bind（this）；

在构造函数中

另一个是箭头函数

ontoggleop=（事件）=>{…}

---

还有

onClick={this.ontogloop.bind（this）}

ES6

React.Component

不会自动将方法绑定到自身。您需要自己在

构造函数中绑定它们。如下所示：

class PlayerControls extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }
  }

  render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

    return (
      <div className="player-controls">
        <FontAwesome
          className="player-control-icon"
          name='refresh'
          onClick={this.onToggleLoop}
          spin={this.state.loopActive}
        />
        <FontAwesome
          className={shuffleClassName}
          name='random'
          onClick={this.onToggleShuffle}
        />
      </div>
    );
  }

  onToggleLoop(event) {
    // "this is undefined??" <--- here
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
  }

我在一个渲染函数中遇到了类似的绑定，并最终通过以下方式传递了
this
的上下文：

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

我还使用了：

{someList.map(function(listItem) {
  // your code
}, this)}

{someList.map（（列表项，索引）=>
)}
如果在componentDidMount…等生命周期方法中调用创建的方法，则只能使用
this.ontogleLoop=this.ontogleLoop.bind（this）
和胖箭头函数
ontogleLoop=（事件）=>{…}

在构造函数中声明函数的常规方法不起作用，因为生命周期方法在前面被调用。
以这种方式编写函数：

{someList.map((listItem, index) =>
    <div onClick={this.someFunction.bind(this, listItem)} />
)}


关键字this的绑定在fat arrow函数内外都是相同的。这与使用函数声明的函数不同，后者可以在调用时将其绑定到另一个对象。维护this绑定对于映射之类的操作非常方便：this.items.map（x=>this.doSomethingWith（x））

如果您使用的是babel，那么可以使用ES7绑定操作符绑定“this”

导出默认类SignupPage扩展React.Component{
建造师（道具）{
超级（道具）；
}
handleSubmit（e）{
e、 预防默认值（）；
常量数据={
电子邮件：this.refs.email.value，
} 
}
render（）{
const{errors}=this.props；
返回(
注册
)
}
}
您应该注意，
这取决于调用函数的方式
ie：当函数作为对象的方法调用时，其
this
设置为调用该方法的对象

此
在JSX上下文中可以作为组件对象访问，因此您可以将所需的方法内联调用为
此
方法

若您只是传递对函数/方法的引用，那个么react似乎会将其作为独立函数调用

export default class SignupPage extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault(); 

    const data = { 
      email: this.refs.email.value,
    } 
  }

  render() {

    const {errors} = this.props;

    return (
      <div className="view-container registrations new">
        <main>
          <form id="sign_up_form" onSubmit={::this.handleSubmit}>
            <div className="field">
              <input ref="email" id="user_email" type="email" placeholder="Email"  />
            </div>
            <div className="field">
              <input ref="password" id="user_password" type="new-password" placeholder="Password"  />
            </div>
            <button type="submit">Sign up</button>
          </form>
        </main>
      </div>
    )
  }

}

在我的例子中，这就是解决方案=（）=>{}

onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object

在我的例子中，对于使用forwardRef接收ref的无状态组件，我必须按照这里所说的做

由此（onClick无法访问与“this”等价的内容）

const Com=forwardRef（（props，ref）=>{
返回{console.log（ref.current}}/>
})

对此（它起作用）

const useCombinedRefs=（…refs）=>{
const targetRef=React.useRef（）
useffect（（）=>{
引用forEach（引用=>{
如果（！ref）返回
if（typeof ref==“function”）ref（targetRef.current）
else ref.current=targetRef.current
})
}，[参考文献]）
返回目标引用
}
const Com=forwardRef（（道具，ref）=>{
const innerRef=useRef（）
const combinedRef=useCombinedRefs（ref，innerRef）
返回{console.log（combinedRef.current}}/>
})
您可以重写如何从render（）方法调用OnToggleLop方法

render（）{
var shuffleClassName=this.state.toggleActive？“玩家控制图标激活”：“玩家控制图标”
返回(
this.ontogglelop（事件）}
spin={this.state.loopActive}
/>       
);
}

在从属性中的表达式调用函数时显示此模式。
如果将onClick属性更改为
（）=>这个.OnToggleLop
在将OnToggleLop函数移动到react类中后，它也会工作。你真的必须绑定每个react类的每个方法吗？这不是有点疯狂吗？@AlexL有一些方法可以在不显式绑定这些方法的情况下进行绑定。如果使用babel，可以将react组件上的每个方法声明为ar行函数。这里有一些例子：但是为什么
这个
首先是未定义的？我知道
这个
在Javascript中取决于函数的调用方式，但是这里发生了什么？但是我怎么能做到这一点呢？函数是在构造函数之后才定义的？我得到了一个“无法读取未定义的属性'bind'”如果我尝试在构造函数中这样做，那么我的函数是在类上定义的：（为什么OnTogleLoop=（）=>{}工作？我遇到了同样的问题，我在构造函数中绑定了它，但它不工作…现在我看到了你的帖子，用一个箭头函数语法替换了我的方法，它工作了。你能给我解释一下吗？从；箭头函数不创建它自己的this，而是使用封闭执行上下文的this值。注意，在
onClick
会在每次渲染时返回一个新函数，因此它看起来像是为道具传递了一个新的值，与
PureComponent
中的
shouldComponentUpdate
相混淆。你在那里创建了很多不必要的函数，每次渲染列表时都会…。@T.J.Crowder是的，这些都很有趣每次调用render时都会重新创建Action。最好将函数创建为类方法，并将它们绑定到类中一次，但是对于初学者来说，如果我这样做，手动上下文绑定可能会有所帮助。我得到
ReferenceError:字段不是当前的
onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object

methodName = (params) => {
//your code here with this.something
}

const Com = forwardRef((props, ref) => {
  return <input ref={ref} onClick={() => {console.log(ref.current} } />
})

const useCombinedRefs = (...refs) => {
  const targetRef = React.useRef()

  useEffect(() => {
    refs.forEach(ref => {
      if (!ref) return

      if (typeof ref === 'function') ref(targetRef.current)
      else ref.current = targetRef.current
    })
  }, [refs])

  return targetRef
}

const Com = forwardRef((props, ref) => {
  const innerRef = useRef()
  const combinedRef = useCombinedRefs(ref, innerRef)

  return <input ref={combinedRef } onClick={() => {console.log(combinedRef .current} } />
})

render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

return (
  <div className="player-controls">
    <FontAwesome
      className="player-control-icon"
      name='refresh'
      onClick={(event) => this.onToggleLoop(event)}
      spin={this.state.loopActive}
    />       
  </div>
    );
  }