ReactJSフィルタリスト順に順に -- javascript フィールド と reactjs フィールド 関連 問題

Reactjs filter list in order by letter












2
vote

問題

日本語

電子メールアドレスのリストがあります。ユーザーが電子メールアドレスを入力したときにそれらをフィルタしたいです。ユーザがEメールアドレスを入力し始めると、文字 "a"で始まるときに、結果リストは電子メールアドレスを表示する必要があります。電子メールではありません。

。フィルター方式を使用しています。 「A」と入力すると、利用可能なすべてのEメールアドレスがすべて表示されます。最初の文字ではありません。

<事前> <コード> .filter(item => { return item.email.toLowerCase().indexOf(props.filterText.toLowerCase()) !== -1 })

item はオブジェクトで、 email は値です。 .git0 ユーザーがフィルタリングするために入力されたテキストを取得します。

英語

I have a list of email addresses. I want to filter them when user type a email address. When user start to type a email address start with letter "A", the results list should show the email addresses only start with "A" letter. Not the email addresses the letter "A" from middle or last.

I'm using .filter method. When i type "A", it shows all "A" letter available email addresses. Not the first letter.

.filter(item => {     return item.email.toLowerCase().indexOf(props.filterText.toLowerCase()) !== -1 })  

item is an object and email is the value. filterText getting the text that user entered to filter.

</div
     

回答リスト

2
 
vote
vote
ベストアンサー
 

それを行う方法は2つあります

<コード> String.prototype.startsWith

<事前> <コード> items.filter(item => item.toLowerCase().startsWith(props.filterText.toLowerCase()))

または1文字だけの場合は、最初の索引

を確認することができます <事前> <コード> items.filter(item => item[0] && item[0].toLowerCase() === "a")
 

There is two ways of doing it

using String.prototype.startsWith

items.filter(item => item.toLowerCase().startsWith(props.filterText.toLowerCase())) 

Or if it's only one letter you can just check the first index

items.filter(item => item[0] && item[0].toLowerCase() === "a") 
</div
 
 

関連する質問

0  クラスベースのAXIOS要求をフックベースのコードに統合する  ( Integrating class based axios request to the hook based code ) 
このクラスベースのAXIOSリクエストをJSONファイルからデータを取得する他のフックベースのコードに統合する方法基本的に私はデータソースの場所をAXIOS GETリクエストと置き換えたいです。ありがとう。 <事前> <コード> componentDidMou...

0  Reactでフォームを送信する方法  ( How to submit a form in react ) 
反応成分のフェッチで反応成分にはない形式を送ることができるかどうかを知りたいのです。 <事前> <コード> <form action="json.bc" class="form_search" method="post"> <input type="hid...

0  Charts RecativeJSを使用してレンダリングのAPIからデータオブジェクトを表示するためのFor Loopを作成します。  ( Make a for loop to show data object from api in render using charts reactjs ) 
チャートのAPIからデータを表示する必要があります( HTTPS) ://canvasjs.com/react-charts/chart-index-data-label/ ) これは私のAPIの前部: <事前> <コード> //API Gains stat...

2  Next.jsとTypeScriptでReact StyleGuidistを設定する  ( Setting up react styleguidist with next js and typescript ) 
私はnext.jsとtypescriptでReact Styleguidistをセットアップしようとしていますが、問題に歩き続けます。 My現在のstyleguide.config.jsは次のようになります: <事前> <コード> const path = r...

0  反応 - 両親にアクセスする子供たちは早すぎる?  ( React children accessing parents state too early ) 
子からapp.jsにコールバックを使用する場合、app.jsのコールバック関数は要素の状態を設定します。 同じ子関数で、次の行で、関数はこの状態にアクセスします。これはPROPとして渡されます。 この次の行がすでに更新された状態で実行されていることを確認する方...

1  Vanilla JavaScriptを使用してReact App DOMに追加する方法  ( How to append to a react app dom using vanilla javascript ) 
私は私が任意のウェブサイトからテキストを強調することを可能にするクロム拡張を作成しています。 あなたにアイデアを与えるために <事前> <コード> var newDom = document.body.innerHTML; var selection = wi...

1  ReactJS-BootstrapフォームとH1タグを並べて配置する方法  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
私は私のフォームグループと私のh1タグを横々と横々としたいです。私はディスプレイを使ってみました:インラインブロックと他のさまざまなもののものですが運がなかった。これが私の.cssコードです: <事前> <コード> .testingForm { max-w...

0  Mock Dispatch関数は呼び出されません  ( Mock dispatch function is not called ) 
非同期アクション作成者のテストを書いていますが、「推定モック機能が「と呼ばれている」と述べた問題に遭遇しました: <事前> <コード> [{"type": "GET_LOGIN_SUCCESS", "value": true}] しかしそれは呼ばれなかっ...

84  React Statelessコンポーネントのイベントハンドラ  ( Event handlers in react stateless components ) 
React Statelessコンポーネントでイベントハンドラを作成するための最適な方法を見つけようとしています。私はこのようなことができる: <事前> <コード> const myComponent = (props) => { const myH...

0  共有可能なパネルのURLを反応させる  ( React sharable panel url ) 
次のスニペットを検討してください。今すぐボタンをクリックするde 'IE indexroot 私が達成したいのは: "href="http://localhost:3000/de/?open" http:// localhost:3000 / de /? ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有