Question

首先，您可能会观察到，我是Javascript和React.js的新手。我目前正在尝试训练自己。

我试图显示一个“键盘”（从A到Z的所有字母），并试图通过对每个字母实施onclick事件来收集数据（显示的字母）。但是，即使我的onclick事件似乎可以正常工作，但在控制台中却得到了“未定义”的答案。

handleLetterClicked（）方法可以正常工作，但是handleKeyClicked（）不能正常工作，所以我做错了事，但是无法解决...

希望您能提供帮助。提前谢谢。

这是我的键盘组件：

import React from 'react'
import './Keyboard.css'

const alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']


const displayKeyboard = alphabet.map((lettreAlphabet) =>
<div className="keyboardKey">    
    {lettreAlphabet}
</div>
)


const Keyboard = ({ lettreAlphabet, onClick }) => (
<div className={lettreAlphabet} onClick={() => onClick(lettreAlphabet)}>
    <span className="touche">
        {displayKeyboard}
        {lettreAlphabet}
    </span>
</div>
)


export default Keyboard

这是我的应用程序

import React, { Component } from 'react'
import GuessCount from './GuessCount'
import Letter from './Letter'
import Keyboard from './Keyboard'

import './App.css' 

class App extends Component {

  handleKeyClicked(lettreAlphabet){
    console.log(lettreAlphabet, 'clicked')
  }
  handleLetterClicked(letter){
    console.log(letter, 'alsoClicked')
  }

  render() {
    return (
      <div className="container">
        <div className="pendu">
          <GuessCount guesses={0} />                
          <Letter letter="Z" feedback="visible" onClick={this.handleLetterClicked} />
        </div>
        <div className="keyboard">
          <Keyboard onClick={this.handleKeyClicked}/>
        </div>
      </div>
    )
  }
}

export default App;

无法收集数据-React.js

0 个答案: