Question

我不确定我在这里做错了什么。 ReactJS对我来说很新，所以我需要一些帮助才能朝着正确的方向发展。

我想要实现的是当在单个列表项上单击跨度时，它应该删除列表项。我在父组件上创建了一个removeHandler函数，并尝试通过props传递该函数。

代码编译得很好，但是当我尝试在浏览器中运行它时，我会在控制台中看到它：

Uncaught TypeError: Cannot read property 'props' of undefined
at createTasks (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:9556:26)
at Array.map (native)
at Object.render (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:9562:33)
at file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13530:21
at measureLifeCyclePerf (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:12809:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13529:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13556:32)
at ReactCompositeComponentWrapper._updateRenderedComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13480:36)
at ReactCompositeComponentWrapper._performComponentUpdate (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13458:10)
at ReactCompositeComponentWrapper.updateComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13379:12)

不确定我做错了什么，我有这两个组成部分：

var TodoList = React.createClass({
getInitialState: function() {
return {
    items: [] // De initial state (state wanneer het component gemount wordt) voor items wordt aangemaakt en is per definitie leeg.
  };
},
addItem: function(e) {
  var itemArray = this.state.items;

  if(this._inputElement.value){ // Controleer of er een value is gepost. Een lege taak willen we immers niet toevoegen aan de todoItems.
  itemArray.push( // Zoja, push dan een een nieuw item aan de itemArray.
    {
      text: this._inputElement.value, // De text van het volgende item is gelijk aan wat er in het textfield is ingevoerd.
      key: Date.now() // De key moet uniek zijn, dus gebruiken we Date.now() voor een zoe goed als unieke key.
    }
  );
}

this.setState({
  items: itemArray // Vervolgens update de state items met itemArray.
});

this._inputElement.value = "";// Het textfield wordt weer leeg gemaakt.

e.preventDefault();
},
handleRemove: function(id){
const remainder = this.state.data.filter((item) => {
  if(item.key !== id) return item;
});

this.setState({
  items: remainder
});
},
render: function() {
  return (
    <div className="todoListMain">
      <div className="header">
        <h3>ToDo lijst webapp</h3>
        <form onSubmit={this.addItem}>
          <input ref={(a) => this._inputElement = a} placeholder="enter task">
          </input>
          <button type="submit">add</button>
        </form>
      </div>
      <TodoItems remove={this.handleRemove} entries={this.state.items}/>
    </div>
  );
}
});

以下内容：

    var TodoItems = React.createClass({
    render: function() {
    var todoEntries = this.props.entries;

    function createTasks(item) {
      return <li key={item.key}>{item.text}<span onClick={this.props.handleRemove(item.key)}>X</span></li>
    }

    var listItems = todoEntries.map(createTasks);
    return (
      <ul className="theList">
        {listItems}
      </ul>
    );
  }
  });

Answer 1

var TodoItems = React.createClass({
    render: function() {
      var todoEntries = this.props.entries;

      function createTasks(item) {
        return <li key={item.key}>{item.text}<span onClick={() => this.props.remove(item.key)}>X</span></li>;
      }

      var listItems = todoEntries.map(createTasks,this);
      return (
        <ul className="theList">
          {listItems}
        </ul>
      );
    }
  });

Answer 2

更改<span onClick={this.props.handleRemove(item.key) 到<span onClick={this.props.remove(item.key)道具名称是删除而不是handleRemove

并todoEntries.map(createTasks, this);也this.props.remove.bind(this, item.key)

Answer 3

大卫说的是真的，但你需要做一些额外的事情，所以我要复制大卫的答案和修复：

将<div class="row"> <div class="col-lg-2 col-sm-4"> <div class="circle-tile"> <a href="#"><div class="circle-tile-heading green"><i class="fa fa-commenting-o fa-fw fa-3x"></i></div></a> <div class="circle-tile-content green"> <div class="circle-tile-description text-faded"> Åbne sager</div> <div class="circle-tile-number text-faded "><?php echo $row['OPEN'];?></div> <a class="circle-tile-footer" href="#">Mere info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-4"> <div class="circle-tile "> <a href="#"><div class="circle-tile-heading red"><i class="fa fa-check fa-fw fa-3x"></i></div></a> <div class="circle-tile-content red"> <div class="circle-tile-description text-faded"> Lukket sager </div> <div class="circle-tile-number text-faded "><?php echo $row['CLOSED'];?></div> <a class="circle-tile-footer" href="#">Mere Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div>更改为<span onClick={this.props.handleRemove(item.key)道具名称为删除而不是handleRemove

ReactJS - ToDo应用程序，从列表中删除项目

3 个答案: