0

我尝试添加许多芯片（http://react-toolbox.com/#/components/chip），但我真的失败了 React...

链接中的示例仅显示单个可删除芯片。只要有一个可删除的芯片，它就可以工作，但我不能让它与更多的芯片一起工作。

这是我的代码：

import React, { PropTypes } from 'react';
import Chip from 'react-toolbox/lib/chip';

var Chiplist = [
    {'id': 1, 'title': 'Keyword 1'},
    {'id': 2, 'title': 'Keyword 2'},
    {'id': 3, 'title': 'Keyword 3'},
    {'id': 4, 'title': 'Keyword 4'}
 ];

class ChipsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {deleted : {1: false, 2: false, 3: false, 4: false}};
    /*for(i = 0; i < Chiplist.length; $i++){
    state.deleted.i = false;
    }*/
  }


 /* for(i = 0; i < Chiplist.length; $i++){
    state.deleted.i = false;
  }*/

  handleDeleteClick(index) {
    /*this.setState({
      deleted : {1: false, 2: true, 3: false, 4: false}
    });
    console.log(this);*/
    console.log(index);
  };

  render () {
    const mychips = Chiplist.map((chip, index) =>
      this.state.deleted[index] ? null : ( <Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}>{chip.title}</Chip> )
    );
    return (
      <div className="chips-list">
        { mychips }
      </div>
    );
  }
}

export default ChipsList;

为什么，当我想把索引值传给函数的时候，函数一直被调用，不知道为什么……

4

1 回答 1

0

因为您正在调用该函数：

<Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}>

传递函数的正确方法是不调用它，即：

<Chip deletable onDeleteClick={this.handleDeleteClick}>

但是，由于您需要索引，因此您需要以某种方式保存它。输入闭包。您需要做的是有一个返回函数的函数，如下所示：

handleDeleteClick(index) {
  return () => {
    console.log(index);
  }
};

然后，您可以使用原始方法创建芯片：

<Chip deletable onDeleteClick={this.handleDeleteClick(index + 1)}>
于 2017-06-07T14:59:50.143 回答