class SearchForm extends React.Component {
  // ...
  render() {
    const { searchVisible } = this.state;
    let searchClasses = ["searchInput"]
    if (searchVisible) {
      searchClasses.push("active")
    }

    return (
      
        

        

      
    );
  }
}

請注意，我們在我們的 字段上丟失了樣式。 由于我們不再在我們的新 組件中具有searchVisible狀態，所以我們不能再使用它來對其進行風格化了。 _無論如何_，我們可以從我們的Header組件傳遞一個支持，該組件告訴SearchForm將輸入渲染為可見。

我們定義searchVisible 屬性（當然使用React.PropTypes），并更新render函數以使用新的prop值來顯示（或隱藏）搜索。 我們還將為字段的可見性設置一個默認值為false（因為我們的Header顯示/隱藏它很好）：

class SearchForm extends React.Component {
  static propTypes = {
    onSubmit: React.PropTypes.func.isRequired,
    searchVisible: React.PropTypes.bool
  }
  // ...
}

現在我們在 元素上有我們的樣式，讓我們添加用戶在搜索框中鍵入的功能，我們將要捕獲搜索字段的值。 我們可以通過將onChange參數附加到 元素上來實現這個工作流，并在每次更改 元素時傳遞一個函數來調用它。

class SearchForm extends React.Component {
  // ...
  updateSearchInput(e) {
    const val = e.target.value;
    this.setState({
      searchText: val
    });
  }
  // ...
  render() {
    const { searchVisible } = this.state;
    let searchClasses = ["searchInput"]
    if (searchVisible) {
      searchClasses.push("active")
    }

    return (
      

        

        

      
    );
  }
}

當我們鍵入字段時，將會調用updateSearchInput() 函數。 我們將通過更新狀態來跟蹤表單的值。 在updateSearchInput() 函數中，我們可以直接調用this.setState() 來更新組件的狀態。

該值在event對象的目標上保存為`event.target.value"。

class SearchForm extends React.Component {
  // ...
  updateSearchInput(e) {
    const val = e.target.value;
    this.setState({
      searchText: val
    });
  }
  // ...
}

控制與不受控制
我們正在創建所謂的不受控制的組件，因為我們沒有設置 元素的值。 我們現在不能對輸入的文本值提供任何驗證或后處理。
如果我們要驗證字段或操作 組件的值，我們將必須創建一個所謂的控件組件，這真的只是意味著我們使用value"傳遞一個值 屬性。 受控組件版本的render()` 函數將如下所示：
class SearchForm extends React.Component {
  render() {
    return (
      
    );
  }
} 

到目前為止，我們無法真正提交表單，所以我們的用戶無法真正搜索。 我們來改變一下 我們需要將component包含在一個DOM元素中，這樣我們的用戶可以按回車鍵提交表單。 我們可以使用

class SearchForm extends React.Component {
  // ...
  submitForm(e) {
    e.preventDefault();

    const {searchText} = this.state;
    this.props.onSubmit(searchText);
  }
  // ...
  render() {
    const { searchVisible } = this.props;
    let searchClasses = ["searchInput"]
    if (searchVisible) {
      searchClasses.push("active")
    }

    return (
      
        
      
    );
  }
}

我們立即在submitForm()函數上調用event.preventDefault()。這將阻止瀏覽器冒泡，從而使整個頁面的默認行為重新加載（瀏覽器提交表單時的默認功能）。

現在當我們鍵入 字段并按回車鍵，submitForm() 函數被調用的事件對象。

那么好的，我們可以提交表單和內容，但是什么時候我們實際上進行搜索？為了演示目的，我們將把搜索文本傳遞給父子組件鏈，以便 Header 可以決定搜索_什么_。

SearchForm 組件當然不知道它正在搜索什么，所以我們必須把責任傳遞給鏈。我們將會使用這種回調策略。

為了將搜索功能傳遞給鏈，我們的“SearchForm”將需要接受在提交表單時調用的函數。我們來定義一個我們稱之為 SearchForm 的屬性，我們可以傳遞給我們的SearchForm 組件。作為好的開發人員，我們還會為這個onSubmit函數添加默認的prop值和propType。因為我們想要確定onSubmit() 是被定義的，所以我們將把onSubmit的prop設置成一個必需的參數：

class SearchForm extends React.Component {
  static propTypes = {
    onSubmit: React.PropTypes.func.isRequired,
    searchVisible: React.PropTypes.bool
  }
  // ...
  static defaultProps = {
    onSubmit: () => {},
    searchVisible: false
  }
  // ...
}

當表單提交時，我們可以直接從props調用這個函數。 由于我們在跟蹤我們狀態下的搜索文本，所以我們可以在該狀態下使用searchText值調用該函數，因此onSubmit() 函數只能獲取值并且不需要處理事件。

class SearchForm extends React.Component {
  // ...
  submitForm(event) {
    // prevent the form from reloading the entire page
    event.preventDefault();
    // call the callback with the search value
    this.props.onSubmit(this.state.searchText);
  }
}

現在，當用戶按下enter時，我們可以通過我們的Header 組件來調用props 中傳遞的onSubmit() 函數。

我們可以在我們的 Header 組件中使用這個 SearchForm 組件，并傳遞我們定義的兩個屬性（searchVisible 和onSubmit）：

import React from "react";
import SearchForm from "./SearchFormWithSubmit"

class Header extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchVisible: false
    }
  }

  // toggle visibility when run on the state
  showSearch() {
    this.setState({
      searchVisible: !this.state.searchVisible
    })
  }

  render() {
    // Classes to add to the  element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    return (
      

        

          

          

          

        

        
          {this.props.title}
        

        

        {/* Adding an onClick handler to call the showSearch button */}
        

      
    )
  }
}

export default Header

現在我們有一個搜索表單組件，可以在我們的應用中使用和重用。 當然，我們還沒有搜索任何東西。 我們來解決這個問題，實現搜索。

要在我們的組件中實現搜索，我們希望將搜索責任從我們的 Header 組件傳遞到容器組件，我們稱之為 Panel。

首先，讓我們實現一個從 Panel 容器到Header 組件的子組件中將回調傳遞給父組件的模式。

在Header 組件上，我們來更新一個屬性的propTypes ，我們將它定義為onSearch屬性：

class Header extends React.Component {
  // ...
}
Header.propTypes = {
  onSearch: React.PropTypes.func
}

在Header 組件的"submitForm()"函數里面，調用這個onSearch() 屬性，我們將傳入它：

class Header extends React.Component {
  // ...
  submitForm(val) {
    this.props.onSearch(val);
  }
  // ...
}
Header.propTypes = {
  onSearch: React.PropTypes.func
}

請注意，我們的虛擬樹如下所示：

  

    
  
 

當 更新時，它會傳遞它的意識，搜索輸入的變化到它的父組件
，當它將向上傳遞到組件。 這種方法在React應用中是_very common_，并為我們的組件提供了一套很好的功能隔離。

回到我們在第7天構建的Panel 組件中，我們將把一個函數作為Header 的onSearch() 屬性傳遞給Header。 我們在這里說的是，當提交搜索表單時，我們希望搜索表單回調到頭部組件，然后調用 Panel 組件來處理搜索。

由于Header 組件不能控制內容列表，所以Panel組件可以像我們在這里定義一樣，我們_必須_將職責更多地傳遞給他們。

無論如何，我們的Panel 組件本質上是我們之前使用的Content組件的副本：

class Panel extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false, // <~ set loading to false
      activities: data,
      filtered: data,
    }
  }

  componentDidMount() {this.updateData();}
  componentWillReceiveProps(nextProps) {
    // Check to see if the requestRefresh prop has changed
    if (nextProps.requestRefresh !== this.props.requestRefresh) {
      this.setState({loading: true}, this.updateData);
    }
  }

  handleSearch = txt => {
    if (txt === "") {
      this.setState({
        filtered: this.state.activities
      })
    } else {
      const { activities } = this.state
      const filtered = activities.filter(a => a.actor && a.actor.login.match(txt))
      this.setState({
        filtered
      })
    }
  }

  // Call out to github and refresh directory
  updateData() {
    this.setState({
      loading: false,
      activities: data
    }, this.props.onComponentRefresh);
  }

  render() {
    const {loading, filtered} = this.state;

    return (
      

        

        

          

          {/* Show loading message if loading */}
          {loading && 
Loading
}
          {/* Timeline item */}
          {filtered.map((activity) => (
            
          ))}

        
      
    )
  }
}

我們更新我們的狀態以包括一個searchFilter字符串，這將只是搜索值：

class Panel extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      searchFilter: "",
      activities: []
    }
  }
}

為了實際處理搜索，我們需要將onSearch() 函數傳遞給我們的Header 組件。 我們在我們的Panel組件中定義一個onSearch() 函數，并將其傳遞給render() 函數中的Header 屬性。

class Panel extends React.Component {
  // ...
  // after the content has refreshed, we want to 
  // reset the loading variable
  onComponentRefresh() {this.setState({loading: false});}

  handleSearch(val) {
    // handle search here
  }

  render() {
    const {loading} = this.state;

    return (
      

        

        
      
    )
  }
}

我們在這里所做的就是添加一個handleSearch() 函數并將其傳遞給標題。 現在當用戶鍵入搜索框時，我們的Panel組件上的handleSearch() 函數將被調用。

為了_實現_搜索，我們需要跟蹤這個字符串，并更新我們的updateData() "函數來考慮搜索過濾。 首先讓我們把searchFilter 設置為狀態。 我們也可以強制內容通過將加載設置為true來重新加載數據，因此我們可以在一個步驟中執行此操作：

class Panel extends React.Component {
  // ...
  handleSearch(val) {
    this.setState({
      searchFilter: val,
      loading: true
    });
  }
  // ...
}

最后，我們更新我們的updateData()函數來考慮_搜索_帳戶。

class SearchableContent extends React.Component {
  // ...
      this.setState({loading: true}, this.updateData);
  // ...
}

雖然這可能看起來很復雜，但它實際上幾乎與我們現有的updateData() 函數完全相同，除了我們更新了我們的fetch()結果以在json集合上調用filter() 方法。

所有的collection.filter() 函數都是運行著每個元素傳遞的函數，并且過濾_掉_返回偽造值的值，保留返回真值的值。我們的搜索功能只是在Github活動的 actor.login （Github用戶）上查找匹配，以查看它是否正確匹配searchFilter 值。

隨著updateData() 功能的更新，我們的搜索完整了。

嘗試搜索auser。

現在我們有一個3層應用組件來處理嵌套子組件的搜索。我們通過這個post從初級階段跳到了中級階段。靠著自己。這是一些重大的材料。確保你明白這一點，因為我們會經常使用我們今天介紹的這些概念。