javascript - props.clickHandler 不是一个函数(ReactJS)

Question

您好，我四处搜寻，似乎找不到解决我的问题的方法。我有一个 JSX 元素数组:

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

每个元素都附加了一个事件处理程序。这是“onClick”。

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

每个元素都在此组件中呈现:(JSX 元素列表通过“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 >

  )
}

当我在浏览器中查看应用程序并尝试单击 span 元素时，出现错误:“props.clickHandler 不是函数”

这里还有 props 的代码:

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

对于事件处理程序:

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

  }

感谢任何帮助。

谢谢!

编辑:

抱歉，我忘记添加我有一个名为“text”的 Prop ，其中使用了InputList:

text={this.state.inputList}

带有 Prop 的整个组件:

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

Answer 1

您的代码中有拼写错误:

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

应该是

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