这个问题的发生是因为。changeContent和onClick={this。sendContent}不绑定到组件实例的this。

还有另一种解决方案(除了在构造函数()中使用bind()之外)使用ES6中的箭头函数，这些函数与周围的代码共享相同的词法范围并维护它，所以你可以在render()中更改你的代码为:

render() {
    return (

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

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

    )
  }

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

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

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

在ES6中，使用箭头函数

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

sendContent = (event) => {

}

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

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

而不是:

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

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

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

用更改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>

解决方案:

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

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 ()}

这个问题的发生是因为。changeContent和onClick={this。sendContent}不绑定到组件实例的this。

还有另一种解决方案(除了在构造函数()中使用bind()之外)使用ES6中的箭头函数，这些函数与周围的代码共享相同的词法范围并维护它，所以你可以在render()中更改你的代码为:

render() {
    return (

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

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

    )
  }