props.clickHandler n'est pas une fonction (ReactJS)

Question

Salut J'ai cherché autour et ne peux pas sembler trouver une solution à mon problème. J'ai un ensemble d'éléments JSX:

inputList: [<span contentEditable="false" className="word" onClick={(e) => { props.clickHandler(e) }}>hey</span>, <span contentEditable="false" className="word">there</span>] 

Chacun de ces éléments ont un gestionnaire d'événements qui leur sont rattachés. qui est le "onClick".

onClick={(e) => { props.clickHandler(e)}} 

Chacun de ces éléments sont rendus dans cette composante: (la liste des éléments JSX sont passés avec « props.text »)

export default function Draft(props) { 
    return (
    <div className="draft-container"> 
     <form className="draft-form"> 
     <div onDoubleClick={() => { props.onClick() }} onChange={(e) => { 
      props.textChange(e) }} className="draft-input" 
      contentEditable="true" > 
      {props.text} 
     </div> 
     <button className="clear-btn" value="Clear">Clear</button> 
     <button className="finalize-btn" value="Finalize">Finalize</button> 
     </form> 
    </div > 

) 
} 

Quand je regarde l'application dans le navigateur et essayer cliquer sur l'élément span, je reçois une erreur: « props.clickHandler est pas une fonction »

aussi est ici le code pour les accessoires:

clickHandler={this.handleClick.bind(this)} /> 

et pour le gestionnaire d'événements:

handleClick(e) { 
    alert('IT WORKS!') 

    } 

Toute aide est appréciée.

Merci!

modifier:

désolé j'ai oublié d'ajouter que je suis accessoire appelé "texte" où InputList est utilisé:

text={this.state.inputList} 

tout le composant avec des accessoires:

<Draft onClick={() => { this.strikeThrough() }} textChange={(e) => { this.textChange(e) }} text={this.state.inputList} 
     clickHandler={this.handClick.bind(this)} /> 

Answer 1

Il y a faute de frappe dans votre code:

clickHandler={this.handClick.bind(this)} 

devrait être

clickHandler={this.handleClick.bind(this)}