Question

    var ListItem = require('./listItem');

    var App = React.createClass({ 
    getInitialState : function(){
        return{
        items : []
    }
    },

    deleteElement: function(){
    },

    addElement : function(){
        this.state.items.push(<ListItem />);
        this.forceUpdate();
    },

    render : function(){
        return (
            <div>
                <ul>{this.state.items.map(function(item,i){return (
                <li>
                    <p onClick='this.deleteElement'>(-)</p>
                    {item}
                </li>
            )})}</ul>
            <p onClick='this.addElement'>(+)</p>
            </div>
        );
    }
    });

目前我可以使用li将addElement function元素添加到数组中。但是无法弄清楚如何从li列表中删除特定的ul元素点击deleteElement function。我尝试使用splice()但是没有工作。我是反应新手。所以不知道如何以反应的方式删除点击的li元素

Answer 1

在你的代码中有几个错误

请勿使用this.forceUpdate();，而应使用setState
到onClick你应该传递对函数的引用而不是字符串'this.addElement'

现在考虑如何从列表中删除elemet。您需要传递给deleteElement索引this.deleteElement.bind(this, i)并从items数组中删除元素，然后设置新状态

var App = React.createClass({
  getInitialState : function(){
    return {
      items : []
    }
  },

  deleteElement: function(index) {
    this.setState({
        items: this.state.items.filter(function (e, i) {
        return i !== index;
      })
    });
  },

  addElement: function() {   
    this.setState({
        items: this.state.items.concat(<ListItem time={ +new Date() } />)
    });
  },

  render: function() {
    var list = this.state.items.map(function(item, i) {
      return <li key={ i }>
        <p onClick={ this.deleteElement.bind(this, i) }>(-)</p>
        <span>{ item }</span>
      </li>
    }, this);

    return <div>
      <ul>{ list }</ul>
      <p onClick={ this.addElement }>(+)</p>
    </div>
  }
});

Example

Answer 2

在地图中，设置deleteElement回调时，请传入当前项的索引。

<p onClick={ function () { this.deleteElement(i) }  }>(-)</p>

然后你可以通过切片并排除当前索引来构建一个新数组。

deleteElement: function(index){
  var items = this.state.items;
  var leftSide = items.slice(0, index);
  var rightSide = items.slice(index + 1, items.length);
  this.setState({ items: leftSide.concat(rightSide) });
}

slice优先于splice，因为slice不会改变现有数组。在这里，我们构建一个新的数组，避免任何突变。

如果你使用的是ES6，可以稍微减少一下：

<p onClick={() => this.deleteElement(i) }>(-)</p>

deleteElement: (index) => {
  var items = this.state.items;
  var leftSide = items.slice(0, index);
  var rightSide = items.slice(index + 1, items.length);
  this.setState({ items: [...leftSide, ...rightSide] });
}

在执行此操作时，一旦发现缺点，将在每个deleteElement重新创建JSX中的render周围的函数。这为垃圾收集器创造了更多的工作，因为在内存中会有一堆未使用的函数指针。

Answer 3

这是我要做的......

remove(idx) {
  return (event) => {
    // Concatening original items array returns new array - this is important!
    const items = this.state.items.concat();
    items.splice(idx, 1);
    this.setState({ items });
  }
},

render() {
  return (
    <div>
      ...
      <ul>
        { this.state.items.map((item, i) => <Item key={i} remove={this.remove(i)} text={item}  />) }
      </ul>
      ...
    </div>
  );
}

在这里，您要传递要删除的项目的索引。当然，调用函数在渲染中效果不佳 - 它会删除渲染中的所有项目（实际上，您不应该在渲染方法中更改状态）。相反，您将返回将在单击时执行的函数。

项目组件看起来与此类似：

const Item = React.createClass({
  render() {
    return (
      <li>
        { this.props.text }
        <span onClick={this.props.remove}>&times;</span>
      </li>
    );
  }
});

在这里工作小提琴...... https://jsfiddle.net/69z2wepo/31009/

如何从reactjs中的列表中删除单击的li元素？

3 个答案: