孫子中的div不能通過作為道具傳遞的處理程序來處理onClick事件

Question

我對React＆JS還是很陌生，所以對一些技巧表示感謝：-)我有一個祖父有狀態組件App，這是一個無狀態的兒童Drumpad，它通過.map()呈現App無狀態Pad組件的孫代。 我試圖將onClick處理程序{handleClick}作為道具從App傳遞到Pad，但似乎無法正常工作。 我被卡住了很多天:-(這里的代碼：

class App extends Component {
  constructor(...props) {
     super(...props);
     this.state = {
        power: false,
        bank:"Smooth piano kit",
        display: "Pulsa cualquier tecla",
        volume: 30
     };
     this.handleClick = this.handleClick.bind(this)
    }
    handleClick(e, props) {
      this.setState({
       display: this.props.id
      })
    }
    render() {
return (

  <div className="App">
    <Display display={this.state.display} />
    <div className="Switches">
      <Switch
        name="power"
        onSwitch={this.handleSwitchPower}/>
      <Switch
        name="bank"
        onSwitch={this.handleSwitchBank}/>
    </div>
    <Slider2
     value={this.state.volume}
     onSlide={this.handleOnSlide} />
    <Drumpad 
      bank={this.state.bank === "Heater kit"? sounds["Heater kit"]: sounds["Smooth piano kit"]}
      handleClick={this.handleClick}
      />
  </div>
);
  }

}

export default App;




// child component Drumpad


import React from "react"
import Pad from '../components/Pad.jsx'
// import {sounds, MODE_NAMES} from '../data/sounds-constants.js'


const Drumpad = props => (

    <div id='drum-machine'>
        <div>{props.bank.map(d => (
          <Pad
            key={d.name}
            id={d.name}
            letter={d.shortcut}
            src={d.link}
            handleClick={props.handleClick}/>   
         ))}
        </div>
    </div>
)
export default Drumpad



// grandchild component Pad

import React from "react"
import "../App.css"


const Pad = props => (
    <div 
        className='drum-pad'
        onClick={props.handleClick}
        >
        <h1 >{props.letter}</h1>
        <audio id={props.letter}
            className='clip'
            src={props.src}>
        </audio>
    </div>
)
export default Pad

Answer 1

在您的孫子中，調用函數，而不是將其作為參考傳遞：

<div 
  className='drum-pad'
  onClick={() => props.handleClick(props.id)}>

另外，如果您關心可訪問性，則將單擊處理程序附加到div基本上是錯誤的，因此可以使用按鈕或給div設置role="button"屬性，同時自己管理aria-pressed狀態。 使用按鈕更簡單