小编use*_*297的帖子

我正在尝试构建一个计算器并想在屏幕上打印数字。计算器算法我还没放，只是把数字打印在屏幕上。

const Keys = ({calcKeys})=>(<div className="display-keys"> 
   <div className="screen"><handleClick></div>
      {calcKeys.map((item)=>{
            return <button className="display-keys">{item.key}</button>
      })
 }
 class App extends React.Component { constructor(props) { super(props);
     this.state={calcKeys:[{"key": "AC"},{"key": "CE"},{"key": "±"},{"key": "/"},{"key": "7"},{"key": "8"},{"key": "9"},{"key": "x"},{"key": "4"},{"key": "5"},{"key": "6"},{"key": "-"},{"key": "1"},{"key": "2"},{"key": "3"},{"key": "+"},{"key": "."},{"key": "0"}]};}
      this.displayKeys = this.displayKeys.bind(this)];
      const keyButton = document.querySelector('.display-keys');
      handleClick() {
      keyButton.addEventListener('click', (e) => {
      return const keyPad = e.key;
   });
  } 
render(){
   return(
      <div className="display-container">
       <Keys calcKeys={this.state.calcKeys}/>
      </div> 
    );
 }
}
  ReactDOM.render( <App />, document.getElementById("root"));

我正在尝试使用对象中的函数，但没有成功。

let ops = [
    {'*': (a, b) => a * b}, 
    {'/': (a, b) => a / b},
    {'+': (a, b) => a + b},
    {'-': (a, b) => a - b}
];

let res = [];
let current;

for (var i = 0; i < ops.length; i++) {
   current = ops[i];
   res = current(4, 2);
   console.log(res);
}

请检查 Guilherme Toti 在以下链接中的答案。

函数值如何显示在 HTML 标记中，并带有来自 addEventListerner 单击的返回值？

是否有可能，如果我可以使用“const Keys”作为反应组件，即：“class Keys extends React.Component”。

 const Keys = ({ calcKeys, handleClick }) => (
    <div className="display-keys">
      {calcKeys.map(item => (
           <button onClick={() => handleClick(item.key)}>{item.key}</button>
       ))}
    </div>
)