Question

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

<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'/>

使用单击函数对JS渲染元素进行反应并将索引传递给on click函数

1 个答案: