ReactJS结合Material UI报错：Cannot read property 'handleChange' of undefined

嘿，我一眼就看出问题所在啦！你遇到的这个错误，根源是在SearchBar组件的render方法里，map函数内部的this指向不对——普通的function作为map的回调时，它的this并不会指向组件实例，自然就找不到handleChange方法了。

下面给你几种简单的解决办法：

方法1：使用箭头函数（最推荐） #

箭头函数会自动继承外层作用域的this，直接把map的回调改成箭头函数就行：

render() {
  var itemsList = this.props.searchBarFields.map((element, index) => {
    return (
      <DatePicker
        key={index}
        label={element.label}
        type="date"
        name={element.name}
        defaultValue={Moment(new Date()).format('YYYY-MM-DD')}
        onChange={this.handleChange}
        InputLabelProps={{
          shrink: true,
        }}
      />
    );
  });
  return(
    <div>{itemsList}</div>
  );
}

方法2：提前保存this到变量 #

在map之前把组件的this存到一个变量里，比如that，然后在回调里用that来访问handleChange：

render() {
  const that = this;
  var itemsList = this.props.searchBarFields.map(function(element, index) {
    return (
      <DatePicker
        key={index}
        label={element.label}
        type="date"
        name={element.name}
        defaultValue={Moment(new Date()).format('YYYY-MM-DD')}
        onChange={that.handleChange}
        InputLabelProps={{
          shrink: true,
        }}
      />
    );
  });
  return(
    <div>{itemsList}</div>
  );
}

方法3：给map指定第二个参数（绑定this） #

map方法的第二个参数可以指定回调函数执行时的this值，直接把组件的this传进去就行：

render() {
  var itemsList = this.props.searchBarFields.map(function(element, index) {
    return (
      <DatePicker
        key={index}
        label={element.label}
        type="date"
        name={element.name}
        defaultValue={Moment(new Date()).format('YYYY-MM-DD')}
        onChange={this.handleChange}
        InputLabelProps={{
          shrink: true,
        }}
      />
    );
  }, this); // 这里传入组件的this
  return(
    <div>{itemsList}</div>
  );
}

另外还要提醒你两个小细节：

• 在app.js里你用了Moment，但没导入它哦，记得加上import Moment from 'moment';，不然会报Moment is not defined的错误。
• 你导入的DatePicker其实是material-ui/TextField？如果是Material-UI的话，正确的导入路径应该是import TextField from '@material-ui/core/TextField';（v4版本），不过如果你的项目里已经配置好对应路径的话就没问题。

内容的提问来源于stack exchange，提问作者Makko