ReactJS 无法使用 material ui 读取未定义的 属性 'handleChange'

Question

我正在尝试使用 ReactJS 构建一个基于 props 值动态搜索栏，但我收到以下错误“无法读取未定义的 属性 'handleChange'”。 我没有看到我做错了什么，我只想显示两个 DatePicker。

这是我的代码：

app.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import SearchBar from '../searchBar/searchBar';

export default class Hello extends Component {

  render() {

    const today = Moment(new Date ()).format('YYYYMMDD');

    const fields_newSec = [ {"type":"dateField", "name":"from", "value":today, "label":"From Date"},
                            {"type":"dateField", "name":"to", "value":today, "label":"To Date"} ];

    return (
          <div>
           <SearchBar searchBarFields={fields_newSec} />
          </div>
    );
  }
}
render(<Hello />, document.getElementById('app'));

searchBar.js

import React from 'react';
import DatePicker from 'material-ui/TextField';
import Moment from 'moment';

class SearchBar extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    console.log("Event: "+event.target.value);
    console.log("Text Name: "+event.target.name);
  }

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

    return(
        <div>{itemsList}</div>
    );     
  }
}
export default SearchBar;

Answer 1

我认为你需要为地图使用箭头函数

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>

)

}