解决方案:

没有显式绑定，绑定方法名可以使用胖箭头函数语法()=>{}来维护此上下文。

import React from 'react'

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

  sendContent = (e) => {
    console.log('sending input content ',this.state.inputContent);
  }

  changeContent = (e) => {
    this.setState({inputContent: e.target.value},()=>{
      console.log('STATE:',this.state);
    })
  } 

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

export default SomeClass

其他的解决方案:

在类构造函数中绑定函数。 在JSX模板转义大括号{}中绑定你的函数 {this.methodName.bind ()}

此问题发生在react15.0之后，该事件处理程序没有自动绑定到组件。因此，无论何时调用事件处理程序，都必须手动将其绑定到组件。

有几种方法可以解决这个问题。但是你需要知道哪种方法是最好的，为什么?通常，我们建议将函数绑定到类构造函数中，或者使用箭头函数。

// method 1： use a arrow function
    class ComponentA extends React.Component {
      eventHandler = () => {
        console.log(this)
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

// method 2: Bind your functions in the class constructor.
    class ComponentA extends React.Component {
      constructor(props) {
        super(props);
        this.eventHandler = this.eventHandler.bind(this);
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

这两个方法不会在组件每次渲染时创建一个新函数。所以我们的ChildComponent将不会因为新的函数道具的改变而重新渲染，或者可能会产生性能问题。

您的函数需要绑定，以便使用事件处理程序中的状态或道具

在ES5中，只在构造函数中绑定事件处理函数，而不直接在呈现中绑定。如果你直接在渲染中绑定，那么每次你的组件渲染和重新渲染时，它都会创建一个新函数。所以你应该总是在构造函数中绑定它

this.sendContent = this.sendContent.bind(this)

在ES6中，使用箭头函数

当你使用箭头函数时，你不需要做绑定，你也可以远离范围相关的问题

sendContent = (event) => {

}

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

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

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

我的建议是使用箭头函数作为属性

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

不要使用箭头函数

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

因为第二种方法每次渲染调用都会生成新函数，实际上这意味着新指针和新版本的道具，如果你以后会关心性能，你可以使用React。PureComponent或React中。组件你可以覆盖shouldComponentUpdate(nextProps, nextState)和浅检查道具到达时

您可以按照以下步骤解决这个问题

用更改sendContent函数

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

使用以下命令更改呈现函数

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>