反應程序清爽頁面爲每個項目刪除

我這裏有一個反應的應用程序，在許多瀏覽器的工作原理：反應程序清爽頁面爲每個項目刪除

<!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/:) –

反應程序清爽頁面爲每個項目刪除

回答

相關問題