react.js - React 中 传递参数的一个问题？

问题描述

问 题

import React from 'react';
import TodoItem from './TodoItem';

export default class TodoList extends React.Component {
  completeHandle(index) {
    console.log(index);
    this.props.onAppCompleteHanlde(index);
  }

  render() {
    var items = [];
    this.props.todoItems.forEach((item, index) => {
      items.push(<TodoItem key={index} onCompleteClick={index => this.completeHandle(index).bind(this)} />);
    });
    return (
      <ul>{items}</ul>
    );
  }
}

我该如何把上述代码中forEach循环中的index参数传到completeHandle方法的参数中呢？
因为我要把这个参数传到父节点中，在Redux的dispatch中用，不知该如何解决？求大神解答。

解决方案

两种办法

//首先把方法改箭头函数
 completeHandle=(index)=> {
    console.log(index);
    this.props.onAppCompleteHanlde(index);
  }

  render() {
    var items = [];
    this.props.todoItems.forEach((item, index) => {
      items.push(<TodoItem key={index} onCompleteClick={/*注意这里并没有传入参数*/() => this.completeHandle(index)/*由于已经把这个方法改成了箭头函数，所以就不需要绑定this了*/} />);
    });
    return (
      <ul>{items}</ul>
    );
  }

//第二种，把这里改成这样
onCompleteClick={this.completeHandle.bind(this,index)}

另外，我比较喜欢

var items = this.props.todoItems.map((item, index) => {
      return(<TodoItem key={index} onCompleteClick() =>{this.completeHandle(index)} />);
    });

这种形式，感觉更加简洁，反正react以后IE8都不支持了，forEach改成map应该没什么问题吧

这篇关于react.js - React 中 传递参数的一个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！