1. 程式人生 > >14 Building A Search Filter

14 Building A Search Filter

vi src/ContactsList.js

import React from 'react';
import Contact from './Contact';
class ContactsList extends React.Component{
     constructor(){
        super();
        this.state ={
            search:''
        };
     }

     updateSearch(event){
        // console.log(event.target.value);
        this
.setState({search:event.target.value.substr(0,20)}); } render(){ let filteredContacts = this.props.contacts.filter( (contact) => { return contact.name.toLowerCase().indexOf(this.state.search.toLowerCase())!= -1; } ); console.log(this
.props.contacts); return( <div> <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} /> <ul> {filteredContacts.map((contact)=>{ return <Contact contact={contact} key={contact.id}/> })} </ul> </div> ) } } export default
ContactsList;

這裡寫圖片描述

相關推薦

14 Building A Search Filter

vi src/ContactsList.js import React from 'react'; import Contact from './Contact'; class ContactsLis

Building a Search-Engine Optimized PWA with Angular 

Making our Web App…Progressive!It is quite easy to turn our app progressive in Angular 6. Simply run the following command in your terminal.$ ng add @angul

4.3 Building a Datapath-Computer Organization and Design筆記

字節 res 地址 計算機硬件 set 流動 off word counter MIPS下的數據路徑 這是計算機硬件間的數據路徑(即數據流動的路徑),下面將較詳細分析此圖: PC(program counter, 程序計數器)是一個用於記錄當前計算機正在執行的指

poj 2931 Building a Space Station &lt;克魯斯卡爾&gt;

accep for each ppi ons cee ont line 求解 0.11 Building a Space Station Time Limit: 1000MS Memory Limit: 30000K

【NOI2015模擬8.14A+B

std out 一個 blog sam 數據 -a spl stream Description 對於每個數字x,我們總可以把它表示成一些斐波拉切數字之和,比如8 = 5 + 3, 而22 = 21 + 1,因此我們可以寫成 x = a1 * Fib1 + a2

BZOJ1696: [Usaco2007 Feb]Building A New Barn新牛舍

-- struct [] play 找到 %d operator ans inf n<=10000個點(xi,yi),找到一個不同於給出的所有點的點,使得該點到所有點的曼哈頓距離最小並找出這樣的點的個數。 第一眼看上去這不是中位數嘛,奇數一個點偶數一片,然後找一下這篇

A* search算法

mar class 選擇 指向 最終 應用場景 操作 span font 今天,還是國慶和中秋雙節的時間節點,一個天氣不錯的日子,孩子已經早早的睡覺了,玩了一整天,也不睡覺,累的實在扛不住了,勉強洗澡結束,倒床即睡著的節奏。。。 不多說題外話,進入正題。 什麽是A*

POJ2031 Building a Space Station【最小生成樹】

col lap ret stream 坐標系 ide 最小 過程 如果 題意: 就是給出三維坐標系上的一些球的球心坐標和其半徑,搭建通路,使得他們能夠相互連通。如果兩個球有重疊的部分則算為已連通,無需再搭橋。求搭建通路的最小邊長總和是多少。 思路: 先處理空間點之間的距離,

codeforces Round #440 A Search for Pretty Integers【hash/排序】

dash hash acad pro section cif close esp small A. Search for Pretty Integers 【題目鏈接】:http://codeforces.com/contest/872/problem/A tim

Building a Space Station POJ 2031 【最小生成樹 prim】

success html eight spa line term sig edi uri http://poj.org/problem?id=2031

POJ 2031 Building a Space Station

space cin b- back str print enter math while C - Building a Space Station 思路:並查集板子。 #include<cmath> #include<cs

behavior planning——14.implement a cost function in C++

tor traffic like set eat create ast code tle n most situations, a single cost function will not be sufficient to produce complex vehicle

Building a Keras + deep learning REST API(三部曲之一)

and from urn -h png app 比較 get round 一、基本環境$ pip install flask gevent requests pillow其中 flask不需要解釋gevent 是用於自動切換進程的;pillow 是用來進行python下的圖

A Gentle Introduction to Applied Machine Learning as a Search Problem (譯文)

​ A Gentle Introduction to Applied Machine Learning as a Search Problem 原文作者:Jason Brownlee 原文地址:https://machinelearningmastery.com/applied-m

Building a RESTful Web Service

文章目錄 一、pom.xml 二、pojo類 三、controller類 四、執行 五、參考文獻 一、pom.xml <?xml version="1.0" encoding="UTF-8"?> <p

POJ 2031 Building a Space Station(最小生成樹+簡單幾何)

題意: 在一個三位平面上有幾個球體,然後輸入資料是給你N個球的球心座標,以及半徑。科學家們想要實現各個球之間的接觸,也就是有表面的接觸。當然,兩個球之間可能會有相交的地方( dis(a,b) <= 0 ),那麼這兩個球是不用你新建道路來實現想通的。 思路: 求每個球之間球面的距離然

building a blog using google app engine and python

Today, I created two videos as a continuation of my YouTube series (). This post will be short because you might need just a little over 5 minutes a pie

Be Involved In Building a Python Application

A python application can be a good place to start your web application development adventures and that is why I would like to invite you if you love tea

【最小生成樹】Building a Space Station --Kruskal演算法+優先佇列+並查集

#include<iostream> #include<queue> #include<cstdio> #include<cstring> #include<cmath> using namespace std; #

Building a React Native App With Complex Navigation Using React Navigation

In May 2018 my startup switched from the Ionic framework to React Native because the app we are developing needs versatile navigation. Ionic’s way of handl