ReactJS无法读取未定义材质ui的属性“handleChange”

我正在尝试使用ReactJS根据props值动态构建搜索栏，但我得到以下错误“无法读取未定义的属性”handleChange“。 我不知道我做错了什么，我只想显示两个日期选择器

这是我的密码：

app.js

从“React”导入React，{Component}； 从'react dom'导入{render}； 从“../SearchBar/SearchBar”导入搜索栏； 导出默认类Hello扩展组件{ 渲染{ const today=Momentnew Date.format'yyyyymmdd'； const fields_newSec=[{type:dateField，name:from，value:today，label:from Date}， {type:dateField，name:to，value:today，label:todate}]； 回来 ; } } render，document.getElementById'app'； searchBar.js

从“React”导入React； 从“物料ui/TextField”导入日期选择器； 从“力矩”中导入力矩； 类SearchBar扩展了React.Component{ 构造器{ 超级作物； this.handleChange=this.handleChange.bindthis； } HandleChange事件{ console.logEvent:+event.target.value； console.logText Name:+event.target.Name； } 渲染{ var itemsList=this.props.searchBarFields.mapfunctionelement，索引{ 回来 ; }; 回来 {itemsList} ; } } 导出默认搜索栏；

---

我认为你需要使用箭头功能的地图

render() {

return (

<div>
{this.props.searchBarFields.map((element, index) => (

              <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,
                    }}                
                />
       ))}
</div>

)

}

---

它可以工作，非常感谢，你能解释一下为什么我需要在这种情况下使用箭头功能吗？因为这将是另一个功能，在谷歌检查箭头和简单功能之间的区别。