javascript - 使用点击功能 react JS 渲染元素并将索引传递给点击功能

Question

我正在尝试使用循环渲染 React 组件，基本上它的链接标签具有点击功能和值(value)。

<p><a href="#" key={i} onClick={() => this.decreaseCount(i)} >delete</a></p>

其中 i 是 for 循环的索引。问题是，我不是在 this.decreaseCount(i) 中获取 i 的值，而是获取数组的长度。但是我用 key={i}

得到了正确的索引

需要帮助!

Answer 1

那应该可以，尝试使用这个(另一种方式):

<p><a href="#" key={i} onClick={this.decreaseCount.bind(this,i)} >delete</a></p>

检查这个例子，你的方式也可以工作:

class App extends React.Component{
   
   a(i){
     console.log(i);
   }
   
   render(){
     return (
        <div>
           {
               [1,2,3].map(i => <p onClick={ () => this.a(i)} > {i} </p>)
           }
        </div>
     )
   }
}

ReactDOM.render(<App/>,document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>