Question

我一直在使用React JS创建这个待办事项列表。我是React的新手，不知道如何删除待办事项或将其设置为完整。会欣赏任何人如何处理这个问题的一些想法。我是否在ListContainer或Item中创建了一个函数？

提前干杯！

这是我的代码和实例：

var ListContainer = React.createClass({
  getInitialState: function() {
    return {
      numChildren: 0,
      list: []
    };
  },
  onAddChild: function() {
    var inputValue = document.getElementById('itemAdder').value;
    var ul = document.getElementById('list');

    var newList = this.state.list;
    if(inputValue !== '') {
      newList.push(inputValue);
      ul.style.display = 'block';
    }
    this.setState({
      numChildren: this.state.numChildren + 1,
      list: newList
    });
  },
  render: function() {
    var children = [];
    for (var i = 0; i < this.state.list.length; i++) {
      children.push(<Item key={'item_' + i} number={i} content={this.state.list[i]}/>);
    };
    return (
      <List addChild={this.onAddChild}>
        {children}
      </List>
    );
  }
});

var List = React.createClass({
  render: function() {
    return (
      <div id="listContainer">
        <h1 className="no-margins even-padding page-header ">To do list</h1>
        <div className="even-padding form-inline">
          <input type="text" name="itemAdder" id="itemAdder" className="form-control" placeholder="Enter things that need doing..." />
          <button type="button" className="btn btn-primary" onClick={this.props.addChild}>Add item</button>
          <ul id="list" className="no-margins list">
            {this.props.children}
          </ul>
        </div>
      </div>
    );
  }
});

var Item = React.createClass({
  render: function() {
    var key = this.props.index;
    return (
      <li className="clearfix">
        {this.props.content}
        <div className="pull-right">
          <button id="completed" className="btn btn-success btn-xs">&#x2714;</button>
          <button id="remove" className="btn btn-danger btn-xs">&#x2718;</button>
        </div>
      </li>
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div id="main" className="page-wrap">
        <ListContainer />
      </div>
    );
  }
});

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

Answer 1

添加处理程序以删除ListContainer组件中的元素

  onDeleteChild: function(index) {   
    this.state.list.splice(index,1);
    this.setState({list: this.state.list });
  },

将索引和处理程序传递给每个Item组件

        children.push(<Item key={'item_' + i} index={i} number={i} onDeleteChild={this.onDeleteChild.bind(this)} content={this.state.list[i]}/>);

在Item组件中，在删除按钮的onClick事件中调用处理程序

var Item = React.createClass({
  delete: function(){
   this.props.onDeleteChild(this.props.index);
  },

  render: function() {
    var key = this.props.index;
    return (
      <li className="clearfix">
        {this.props.content}
        <div className="pull-right">
          <button id="completed" className="btn btn-success btn-xs">&#x2714;</button>
          <button id="remove" onClick={this.delete} className="btn btn-danger btn-xs">&#x2718;</button>
        </div>
      </li>
    );
  }
});

一些阅读

https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/lifting-state-up.html

在ReactJS To Do App上实现删除功能

1 个答案: