取得 input 的值

昨天做到 input event 的綁定，不過尚未取得 input 的值，在 handleQuery 裡，我們可以用 event.target 的方式來取值。下面的截圖可以看到我輸入 tooth 觸發了五次 handleQuery function，每一次都可以抓到當下 input 裡的值。

handleQuery(event){
    console.log(event.target.value);
}

Pass the Query

我有一包假資料，放在 app/product.js 裡面，內容就是一些產品的價錢、製造商、是否有存貨等等的產品資訊。

現在我也要把這個檔案 require 到 app/index.js 中，我才能透過 Query 去假資料裡面瀏覽我要的資訊，做法是在最前面多加一行：

var products = require('./products.js');

拆解 Results component

我將還放在 Search Component 裡的 result 區塊切分出來，建立一個新的 Results Component 去存放這些資料

class Results extends React.Component {
    render(){
      return(
        <div className="results">
            <div className="in-stock">
               <h2><a href="#">Toothpaste</a></h2>
               <p>$2.99</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor</p>
            </div>
        </div>
      )
    }
}

我們在 component 的 constructor 設定 state 初始值

constructor(props) { super(props); this.state = { query: '' }; }

由於我們要偵測的 onChange 基本上就是 keyup，鍵盤一有動作就會觸發一次，而每次的變動等於 state 狀態不同，因此透過 this.setState 可以改變 state，讓 React 知道最新的狀態。為了防止大小寫造成讀不到值的狀況，我直接把輸入的值一律改成小寫 toLowerCase，同時也把不必要的 space 透過 trim() 移除。

handleQuery(query){
    this.setState({'query': query.toLowerCase().trim()})
}

接下來，要變魔術了（咦），我們要進行雙向綁定的 magic～
在 Search component 裡面綁定 handleQuery function

<SearchBar onQuery={this.handleQuery.bind(this)}/>

並且在 handleQuery function 裡使用 props 來呼叫 parent component 裡面的render()以處理這些資料變動所帶來的UI改變。

搜尋產品

這個階段，我們會用到元件的生命週期中的 Updating 的方法 componentWillReceiveProps(nextProps)

在最後 render() 的地方，寫上

ReactDOM.render(<Search product="products"/>, document.getElementById('app'));

<Search product={products} /> 前面的 products 指的是 props name，後面的 products 是 products.js 裡的變數名稱（我存取產品的陣列變數）

在 <Results /> 裡就可以透過 this.props 來呼叫

<Results products={this.props.product} />

接著在 componentWillReceiveProps(nextProps) 裡面，先來測試現在我們 onChange 會出現什麼樣的結果

console.log(nextProps.products);

每一次 onChange 都呼叫 products 物件。

嗚！以為今天效率高可以完成，不過事實上無法ＸＤＤ
只能再切成 Part3 惹～這種寫法快招架不住了！！
一次吸收太多。。。。希望晚上不要夢到我在學 React QQ
專案連結 Github