React.js-无法读取未定义的属性

Question

我正在制作非常简单的react应用。但是，当我尝试通过onChange事件调用父（实际上是祖父母）组件的方法时，我一直在获取Uncaught TypeError: Cannot read property 'props' of undefined。

这是触发事件的组件/表单（因此，在绑定的父组件上调用方法…是的，因为我通过道具将其从父组件传递下来，所以在方法上使用了.bound（this）。）

class MonthsTable extends Component {
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error.
  }
  render(){
    console.log(this.props.setMonth) // here the method is present alright
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} // yes I know, bad habit, but in this case it doesn't matter
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth} />)}
    </form>)
  }
}

这是我如何通过大多数父（祖父母）组件中的props传递该方法的方法。

<Months setMonth={this.setMonth.bind(this)} />

这是我作为父项（方法所有者和方法调用程序之间的组件）中的props传递方法的方式

<MonthsTable setMonth={this.props.setMonth} />

最后传递给您首先看到的组件（MonthsTable）。无论是否相关，最终（大多数子级）组件都会根据if语句是否正常运行而显示（可能以某种方式具有相关性，我不知道）。

问题是…（setMonth）方法为什么在（handleChangeOnMonth）方法内部是“不可见的”。

感谢您的任何建议。

Answer 1

这里的实际问题是this上下文未在您的handleChangeOnMonth函数中定义。这是由于html" target="_blank">javascript处理函数上下文的方式所致，基本上是在调用函数时，如果您不是直接从对象中调用它们，并且未绑定它们，则它们将没有定义的上下文，并且因为您正在传递函数作为输入组件的参数，它将丢失上下文。

解决此问题的最简单方法是绑定函数，建议您在构造函数中绑定函数，如下所示：

class MonthsTable extends Component {
  constructor(props, context){
    super(props, context);
    this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this);
  }
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value);
  }
  render(){
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} 
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth} />)}
    </form>)
  }
}

或者，如果您使用的是装饰器，则可以使用core-decorators包以更优雅的方式执行此操作：

import {autobind} from "core-decorators"

@autobind
class MonthsTable extends Component {     
  handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value);
  }
  render(){
    return (<form>
      {this.props.months.map((e, i) =>
         <input
          type='number'
          id={i} 
          key={i} 
          value={this.props.months[i]}
          onChange={this.handleChangeOnMonth} />)}
    </form>)
  }
}