React入門-React備忘錄(階段項目)

通過這兩天的學習，掌握了一些React的語法規則，如今用一個小例子練習一下。需求很簡單，一個備忘信息的正刪改查。效果以下，咱們逐步分析

1. 數據維護

咱們將頁面中共享的數據維護在state中，notes表示備忘信息列表；note表示與表單綁定的備忘信息值，用於收集用戶的輸入；index表示notes中元素的格式，用於計算備忘ID；keywords是關鍵字，用於過濾輸入。

這裏你們要明確，若是要修改state中的值請使用this.setState()函數

class MyNote extends React.Component{
      // notes表示全部的備忘信息，note表示與表單綁定的備忘信息,index表示notes中備忘錄的數量
      constructor(props){
        super(props);
        this.state = {
          notes:[],
          note:{
            content:''
          },
          index:0,
          keywords:''
        }
      }
      ...
    }

2. 頁面渲染

既然數據有了，那麼如何渲染到頁面中呢？以前咱們學過列表渲染，立刻就能夠派上用場了。列表渲染主要使用數組的map()函數，可是這裏咱們須要考慮一下過濾，用於要輸入關鍵字，當接收到關鍵字後咱們要對輸出的內容進行過濾，那麼如何過濾？若是直接修改this.state.notes將會引發沒必要要的麻煩，這樣會形成不符合條件的數據丟失。還有一種方法就是在渲染的時候過濾。因此下面代碼中我先進調用filter()進行過濾，而後調用map進行映射。

爲了接受用戶輸入，這裏用到了表單，分兩部分進行，第一部分，接收備忘信息，第二部分接收關鍵字。向以前章節提到的，在表單項上綁定onChange事件，當用戶輸入改變的時候表單上的狀態自動映射到state上，便可完成雙向數據綁定。

class MyNote extends React.Component{
    ...
      // 每當表單項的值發生改變的時候將表單項值的狀態與state中note綁定在一塊兒
      handleChange=(event)=>{
        let name = event.target.name;
        let val = event.target.value;
        this.setState({
          note:{
            [name]:val
          }
        })
      }
      // 綁定關鍵字
      handleSearch=(event)=>{
        let keywords = event.target.value;
        this.setState({
          keywords:keywords
        })
      }
      // 渲染
      render(){
        return (
          <div>
            {/*JSON.stringify(this.state)*/}
            {/* 表單*/}
            <div>
              <form onSubmit={this.handleSubmit}>
                <input type="text" name="content" value={this.state.note.content} onChange={this.handleChange}/>
                <input type="submit" value="保存"/>
              </form>
            </div>
            <div>
              <input 
                type="text" 
                placeholder="請輸入關鍵字" 
                onChange={this.handleSearch}
                style={{border:'none','borderBottom':'1px solid #ccc'}}/>
            </div>
            {/* 列表項*/}
            <ul>
              {
                // 先過濾，再返回
                this.state.notes
                .filter(item=>item.content.indexOf(this.state.keywords)>=0)
                .map((item,index)=>{
                  return (
                    <li key={item.id}>
                      {index+1}, 
                      {item.content},
                      <a href="#" onClick={this.removeNote.bind(this,item.id)}>delete</a>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        )
      }
    }

3. 保存

當用戶點擊保存按鈕的時候，咱們將state.note添加到state.notes中。注意，這裏咱們不能直接調用this.state.notes.push()方法來完成備忘信息的保存，由於咱們沒法在constructor以外的位置直接修改state中的值。添加以後咱們須要清空表內容，這時候咱們只須要將note恢復到初始狀態便可。

...
      // 處理表單提交的回調函數
      handleSubmit=(event)=>{
        this.state.note.id = this.state.index + 1;
        this.state.notes.push(this.state.note);
        // 設置state值
        this.setState({
          notes:this.state.notes,
          note:{
            content:''
          },
          index:this.state.index+1
        })
        // 阻止事件默認行爲
        event.preventDefault();
      }
      
    ...

4. 刪除

用戶在點擊刪除的時候須要爲事件處理函數傳遞參數ID，咱們根據ID在notes中進行匹配

// 刪除備忘
      removeNote=(id,event)=>{
        // 進行過濾
        let result = this.state.notes.filter(item=>item.id!=id)
        this.setState({
          notes:result
        })
        event.preventDefault();
      }

---

至此，一個具備增刪改查的React小案例就完成了。有很多同窗確定着急了，感受學到了假的React了，寫代碼以前不該該是先安裝node,再安裝create-react-app建立react工程，而後完成代碼編寫，這個咱們在後面一點點詳細說明