在React的循环中将函数绑定到Element

Question

我尝试使用React重新创建我在Angular中制作的计算器。我发现重新创建html并不太难，但是我在循环元素中绑定onclick事件时遇到了问题。

这是我想要重新创建的元素：

class Button extends React.Component {
  render(){
     return <div onClick={this.props.func} className="calc-button">{this.props.value}</div>;
  }
}

我希望它循环并将函数绑定到按钮。

class OperationsBox extends React.Component {
  constructor(props){
    super(props);
    this.state = objButton;
    this.numClick = this.numClick.bind(this);}
  numClick(){
    console.log("5") 
  }

  render(){
    var rows = [];
    this.state.button.forEach(function(button,index){
    var row  = button.map(function(obj, index2)
    {
       if(index===4){
          return <div className="calc-button clear">{obj.value}</div>;
    }
    return(<Button 
            func={this.numClick.bind(this, index2)} 
            value={obj.value}
            />);
            }.bind(this))
     rows.push(row)})

return <div className="operations-box">
   <div className="calc-row">{rows[0]}</div>
   <div className="calc-row">{rows[1]}</div>
   <div className="calc-row">{rows[2]}</div>
   <div className="calc-row">{rows[3]}</div>
   <div className="calc-row">{rows[4]}</div>
   </div>;
  }
}

它经常说numClick未定义。

这是我的React Calc

的链接

http://codepen.io/awronka/pen/XmyQxB?editors=001

这是我工作Angular Calc的链接

http://codepen.io/awronka/pen/yYeLdp