ReactJSにおける実時間探索

10682 ワード
css react javascript html テキストリンク
こんにちは今日の私は、ボタンをクリックせずにリアルタイムで反応の要素を検索する方法をお見せするつもりです.検索するときに、その単語を含むすべての要素をフィルタリングされ、あなたに示した単語を入力し、リアルタイムになります.
私はこのコードのサンプルデータを使用して、このコードのデータを使用することもできます.
データ
const Data = [

        {
          "id": "61050f211ab57ba6cd86b1e8",
          "name": "Valeria Ramos"
        },
        {
          "id": "61050f21aa707624a853421b",
          "name": "Campos Daniels"
        },
        {
          "id": "61050f21ec0c4d434eedda85",
          "name": "Kate Gilbert"
        },
        {
          "id": "61050f21a4543be9235f4643",
          "name": "Hunt Lynch"
        },
        .
        .
        .
        .
        .
    ];
検索用コード
import React,{useState} from 'react'
import Data from './SampleData'
import './App.css';

function App() {

    const [list, setList] = useState("");


    return (
        <div className="text-center my-5">
            <input 
            type="text"
            placeholder="search..."
            onChange={(event) => {
                setList(event.target.value);
            }}
            />

            <div  className="main">
                {Data.filter((item) => {
                    if(list === ""){
                        return item;
                    }
                    else if(item.name.toLowerCase()
                            .includes(list.toLowerCase())){
                        return item
                    }

                }).map((item) => (
                    <div key={item.id}><p className="items"> 
                      {item.name}
                    </p></div>
                ))
                }
            </div>
        </div>
    )

}

export default App;
作業
  • 最初にUESTENTを使用して入力要素の状態を作成しました.
  • 入力タグを使用して入力要素を作成し、内部でOnChangeイベントを持っていて、OnOnの内部で入力フィールドに入力された単語に一致するリストの状態を変更します.
  • フィルターメソッドを使用してデータをフィルター処理しました.
    4 . if ( list == =""){ return item ;}入力フィールドが空の場合は、データ全体を返します.
  • 他の場合( item . tolowercase () ).( list . tolowercase () )
    返り値
    最初にtolowercase ()メソッドを使用して小文字を小文字に変換します.このメソッドは、型指定された単語がDataSetに含まれているか、includeDind ()メソッドを使用していないかどうかをチェックします.また、名前が小文字形式になっているので、tolowercase ()メソッドを使用して入力単語を小文字に変換します.
  • データをフィルタリングした後、map ()メソッド
    • を使用してデータをマップしました
    CSS
    p{
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: crimson;
  display: flex;
  justify-content: center;
  align-items: center;
  color: antiquewhite;
}
.main{
  margin: 5rem;
  display: grid;
grid-template-columns: repeat(4,1fr);
justify-content: center;
text-align: center;
}
    出力
    検索前

    検索後

    あなたがプロセスを理解することを望みます、そして、誤りがあるならば、コメントセクションでそれを言及してください.それは私が私がそれを修正することができるように私の間違いを知っているのを助けるでしょう.
    このポストを読んでくれてありがとう
    sqliteコマンドとプログラミング
    [vue.js]構成el-tree(作成)