反应程序清爽页面为每个项目删除

我这里有一个反应的应用程序，在许多浏览器的工作原理：反应程序清爽页面为每个项目删除

<!DOCTYPE html> 
<html> 
   
<head> 
  <title>React! React! React!</title> 
  <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
  <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
   
    <style> 
    body { 
     padding: 50px; 
     background-color: #66CCFF; 
     font-family: sans-serif; 
    } 
    .todoListMain .header input { 
     padding: 10px; 
     font-size: 16px; 
     border: 2px solid #FFF; 
    } 

    .todoListMain .header button { 
     padding: 10px; 
     font-size: 16px; 
     margin: 10px; 
     background-color: #0066FF; 
     color: #FFF; 
     border: 2px solid #0066FF; 
    } 

    .todoListMain .header button:hover { 
     background-color: #003399; 
     border: 2px solid #003399; 
     cursor: pointer; 
    } 

    .todoListMain .theList { 
     list-style: none; 
     padding-left: 0; 
     width: 255px; 
    } 

    .todoListMain .theList li { 
     color: #333; 
     background-color: rgba(255,255,255,.5); 
     padding: 15px; 
     margin-bottom: 15px; 
     border-radius: 5px; 
    } 
  </style> 
</head> 
   
<body> 
   
  <div id="container"> 
   
  </div> 
   
  <script type="text/babel"> 
    var destination = document.querySelector("#container"); 

    // es6 is working in the browser :) 
    let y = [1, 3, 6, 15, 39, 88].find(x => x > 39 && x < 90) 

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

      function createTask(item){ 
       return (
        <li key={item.key}> 
         <span>{item.text}</span> 
         <a href="" data-id="{item.id}" 
          className="remove-filter" 
          onClick={this.props.remove.bind(item)} 
         > 
          remove 
         </a> 
        </li> 
       ) 
      } 

      // var listItems = todoEntries.map(createTask.bind(this)); 

      return (
       <ul className="theList"> 
        {this.props.entries.map(createTask.bind(this))} 
       </ul> 
      ); 
     } 
    }); 

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

     addItem: function(e) { 
      var itemArray = this.state.items; 
      itemArray.push(
       { 
        text: this._inputElement.value, 
        key: this.state.items.length 
       } 
      ); 
      this.setState({ 
       items: itemArray 
      }) 
      this._inputElement.value = ""; 
      e.preventDefault(); 
     }, 

     // removing items from a list 
     // https://stackoverflow.com/questions/27817241/how-to-remove-an-item-from-a-list-with-a-click-event-in-reactjs 
     removeItem: function(item, event){ 
      event.preventDefault(); 

      var items = this.state.items.filter(function(itm){ 
       return item.id !== itm.id; 
      }); 

      this.setState({ items: items }); 
     }, 

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

    ReactDOM.render(
      <div> 
        <TodoList/> 
      </div>, 
      destination 
    ); 
  </script> 
</body> 
   
</html>

我按照how to remove an item from a list with a click event in ReactJS?，它似乎是工作，有几个问题。

首先，例如引用<a href data-...，但这并没有工作，重定向我file:///Users/cchilders/tutorials/javascript/react/todo-list/true，哪里来的东西它评估了true（真应该是index.html）

删除作品使用href=""，但它闪烁在一个丑陋的方式页，通常的嫌疑人，使一个href什么也不做不工作...

...如果我尝试href="#"或href="javascript:;"和类似我得到

embedded:60 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

其次，我得到警告

react.js:20478 Warning: bind(): React component methods may only be bound to the component instance. See TodoList

不管是什么，因为我尝试每一件事情。

三，它将删除remove列表中的所有项目，而不仅仅是一个项目。

如何在没有刷新页面的情况下做出删除onclick的反应，并一次删除1个项目？谢谢

来源

2017-01-30 codyc4321

有几件事情你需要改变，检查工作示例jsfiddle，相应地做你的代码的变化。

*不要这样写：{this.props.entries.map(createTask.bind(this))} ，而不是只是从render调用一个方法{this.createTask()}，该函数将返回完整列表，N定义createTask外界渲染的方法。像这样：

createTask: function(){ 
    return this.props.entries.map(item=>{ 
    return (
     <li key={item.key}> 
     <span>{item.text}</span> 
     <a href="#" data-id="{item.id}" 
       className="remove-filter" 
       onClick={()=>this.props.remove(item)} 
     > 
      remove 
     </a> 
     </li> 
)}) 
},

* U忘了给死者链接href，不要将其清空它定义成这样：href="#"。 *请勿将道具remove方法与onClick绑定，请使用它与正常方法调用一样，如下所示：onClick={()=>this.props.remove(item)}。

检查jsfiddle：https://jsfiddle.net/79eax14s/

让我知道如果u需要在这个任何帮助。

来源

2017-01-30 05:52:01

是的，这很好。我看到调用'this.createTasks（）'''''''''''''''''''''''''''''''''''''''''''''谢谢 – codyc4321

我只想知道为什么'this.props.entries.map（createTask.bind（this））'不起作用 – codyc4321

是的，你也可以这样使用，但是你用错了，用它像这样：'this.props.entries.map（this.createTask）'只是传递一个回调方法，n在render之外定义'createTask'，检查'jsfiddle'这个：https://jsfiddle.net/g8mshdja/:) –

反应程序清爽页面为每个项目删除

回答

相关问题