时间戳

首页 > 解决方案 > 在反应中使用箭头函数进行绑定

reactjs - 在反应中使用箭头函数进行绑定

问题描述

那里是新的。我开始学习 React，但我遇到了一个代码问题——我想不通。我试图在这里找到问题：

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Functions/Arrow_functions

我执行绑定 - 并将函数发送到另一个组件。

{this.state.array.map((char, index) => <CharComponent style={mystyle} character={char} click={(index) => this.deleteHandler(index)} key={index}></CharComponent>)}


deleteHandler = (index) => {
    let copyArray = [...this.state.array];
    console.log('copyArray: ' + copyArray);
    copyArray.splice(index, 1);
    console.log('copyArray: ' + copyArray);
    this.setState({ length: copyArray.length, string: copyArray.join(''), array: copyArray });
  }

我无法获得索引 - 它告诉我它是一个对象而不是一个数字。

我做了一个绑定 - 我将索引作为参数发送 - 然后在函数中调用它

为什么括号应该是空的？click={(index) => this.deleteHandler(index)

标签： reactjs

解决方案

只需从 的参数中删除索引click()，因为当您执行单击时，它会为我们提供一个事件对象，而您实际上传递的是事件对象而不是索引。这就是为什么没有从 map 函数中获取实际索引值的原因。

例如，请参见以下代码：

{this.state.array.map((char, index) => <CharComponent style={mystyle} character={char} click={() => this.deleteHandler(index)} key={index}></CharComponent>)}

对于您的问题，Why should the brackets be empty? 如上所述，当我们执行点击时，我们会Event返回一个 javascript 对象。

推荐阅读