【全栈React】第10天: 交互性

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从初级阶段跳到了中级阶段。靠着自己。这是一些重大的材料。确保你明白这一点，因为我们会经常使用我们今天介绍的这些概念。