如果你想在构造函数语法中保留bind，你可以使用proposal-bind-operator并像下面这样转换你的代码:

constructor() {
  this.changeContent = ::this.changeContent;
}

而不是:

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

更简单，不需要bind(this)或fatArrow。

你可以用三种方法来解决这个问题

1.在构造函数本身中绑定事件函数，如下所示

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

2.在调用时绑定

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent.bind(this)}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

3.通过使用箭头函数

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={()=>this.sendContent()}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

如果你想在构造函数语法中保留bind，你可以使用proposal-bind-operator并像下面这样转换你的代码:

constructor() {
  this.changeContent = ::this.changeContent;
}

而不是:

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

更简单，不需要bind(this)或fatArrow。

我们必须将我们的函数与此绑定，以获得类中的函数实例。举个例子

<button onClick={this.sendContent.bind(this)}>Submit</button>

这边，这边。状态将是有效对象。

你好，如果你不想关心绑定你自己的函数调用。你可以使用'class-autobind'然后像这样导入它

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

不要在super调用之前写autobind，因为它将不起作用

Morhaus是正确的，但这个问题可以不受约束地解决。

你可以将箭头函数与类属性建议一起使用:

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

因为箭头函数是在构造函数的作用域中声明的，而且因为箭头函数从它们的声明作用域中维护这一点，所以一切都可以正常工作。这里的缺点是这些不会是原型上的函数，它们都将与每个组件一起重新创建。然而，这并不是什么缺点，因为绑定也会产生同样的结果。