Question

您好我已经四处搜索，似乎无法找到问题的解决方案。我有一个JSX元素数组：

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

这些元素中的每一个都附加了一个事件处理程序。这是＆＃34; onClick＆＃34;之一。

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

这些元素中的每一个都在此组件中呈现：（JSX元素列表用＆＃34; props.text＆＃34;）传递。

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元素时，我收到错误：＆＃34; props.clickHandler不是函数＆＃34;

此处还有道具代码：

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

和事件处理程序：

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

  }

感谢任何帮助。

谢谢！

编辑：

抱歉，我忘了添加我的道具叫＆＃34;文字＆＃34;其中使用了InputList：

text={this.state.inputList}

整个组件包含道具：

 <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)}

props.clickHandler不是函数（ReactJS）

1 个答案: