未定义单击引用方法上的ReactJS错误按钮

Question

我正在使用ReactJS创建并使用按钮作为最后一列渲染表：

                    var cols = [
                       { key: 'Id', label: 'Id'}  ,
                       { key: 'RevLock', label: 'RevLock' },
                       { key: 'Revision', label: 'Revision' },
                       { key: 'Name', label: 'Name' },
                       { key: 'ProjectNumber', label: 'Project Number' },
                       { key: 'Description', label: 'Description' },
                       { key: 'CreatedDate', label: 'Created Date' },
                       { key: 'Language', label: 'Language' }
                    ];


                    var Table = React.createClass({

                       getInitialState: function () {
                          return { data: [] };
                       },

                       componentDidMount: function () {
                          this.loadProjectsFromServer();
                       },

                       loadProjectsFromServer: function () {
                          var xhr = new XMLHttpRequest();
                          xhr.open('get', this.props.dataUrl, true);
                          xhr.onload = function () {
                             var data = JSON.parse(xhr.responseText);
                             this.setState({ data: data });
                          }.bind(this);
                          xhr.send();
                       },

                       render: function () {
                          var headerComponents = this.generateHeaders(),
                          rowComponents = this.generateRows();

                          return (
                             <table>
                                <thead> {headerComponents} </thead>
                                <tbody> {rowComponents} </tbody>
                             </table>
                          );
                       },

                       generateHeaders: function () {
                          var cols = this.props.cols;

                          return cols.map(function (colData) {

                             return <th key={colData.key }>{colData.label}</th>
                          });
                       },

                       openElem: function ( ) {

                          console.log('Clicked ')
                       },

                       generateRows: function () {
                          var cols = this.props.cols;
                          data = this.state.data




                          return data.map(function (item) {

                             var cells = cols.map(function (colData, idx, arr) {
                                return (idx === arr.length -1)
                                           ? <td>{item[colData.key]}<DoorButton openItems={this.openElem }/></td> 
                                           : <td>{item[colData.key]}</td>;
                             });


                             return <tr key={item.Id }>{cells}</tr>;
                          });
                       },
                    });

                    var DoorButton = React.createClass({

                       handleClick: function (e) {

                          this.props.openItems();
                       },

                       render: function () {
                          return (
                             <button onClick={this.handleClick}>Open Doors</button>
                          );
                       }
                    });

                    ReactDOM.render(
                       <Table cols={cols}  dataUrl="/Project/GetProjects" />,
                       document.getElementById('projectTable')
                    );

此代码工作正常，但是当我点击按钮时收到以下错误

  

未捕获的TypeError：this.props.openItems不是函数。

如何触发原始按钮的onclick事件？