試圖使用React製作簡單的待辦事項列表，我如何將項目推送到數組？

我正在嘗試使用React製作一個簡單的ToDo列表。我如何將項目推送到數組？我正在嘗試使用ES6。我想單擊該按鈕，並獲取列表中顯示的輸入字段的內容。試圖使用React製作簡單的待辦事項列表，我如何將項目推送到數組？

import React, { Component } from 'react'; 

class Example extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      query: [], 
      item: '' 
     } 
    } 

    render() { 
     return(
      <div> 
       <form> 
       <fieldset> 
        <legend>Example</legend> 
        <input 
         type="text" 
         onChange={e => {this.setState({item: e.target.value})}} /> 
        <button 
         onClick={() => {this.setState({ query: [...this.state.query, this.state.item]})}}>Add Item to Array 
        </button> 
       </fieldset> 
       </form> 
      { 
       this.state.query.map((q, key) => { 
        return(
         <li key={key}>{q}</li> 
        ) 
       }) 
      } 
      </div> 
     ) 
    } 
} 

export default Example;

編輯：

在控制檯中，我看到一個項目被添加到陣列中，但此後將頁面刷新，而數組是空的一次。我應該在按鈕的某處添加event.preventDefault嗎？

編輯：

通過添加type =「button」到按鈕來解決它。而不是使用默認的「提交」類型。現在它不刷新頁面，我可以看到添加到數組中的項目，並顯示爲列表。我只是在練習，所以我知道存儲數據，我需要一個數據庫等:) :)

來源

2017-03-28 userden

你發佈的代碼有什麼問題？ – Timo

@Timo在控制檯中，我看到一個項目被添加到數組中，但是然後頁面刷新，並且數組再次爲空。我應該在按鈕的某處添加event.preventDefault嗎？ – userden

添加到陣列不會在刷新後保留它。添加到狀態與添加到將在刷新後將丟失其值的JavaScript變量相同。如果您希望將其保存以供未來檢索，則可將其存儲在某個數據庫，文件等中。 –

通過添加type =「button」按鈕來解決它。而不是使用默認的「提交」類型。現在它不刷新頁面，我可以看到添加到數組中的項目，並顯示爲列表。我只是在練習，所以我知道存儲數據，我需要一個數據庫等。:)

來源

2017-06-24 16:28:11 userden

試圖使用React製作簡單的待辦事項列表，我如何將項目推送到數組？

回答

相關問題