React制御コンポーネント内に関連するデータリストを含むhtml5入力があります。入力フィールドがクリックされたとき、またはフォーカスを受け取ったときにテキストをクリアして、すべてのオプションが表示されて選択できるようにしたい。私はこの質問でアルフレッドの優れた答えに従いましたが、React制御コンポーネントでまったく同じ結果を達成することはできません。残念ながら、onClickハンドラー内でblurを呼び出すと、フォーカスが（もちろん）失われるため、ユーザーが複数の文字を入力できなくなります。
ユーザーがテキストを入力してクリアし、テキストボックスがクリックされるたびにオプションの完全なセットを表示する機能を維持するにはどうすればよいですか？
import React, { useState } from "react";
const MyForm = () => {
const [options, setOptions] = useState(["Apples", "Oranges", "Bananas", "Grapes"]);
const handleChange = (event) => {
event.target.blur();
};
const clear = (event) => {
event.target.value = "";
};
return (
<>
<input
type="input"
list="optionsList"
onChange={handleChange}
onFocus={clear}
placeholder="Select an option"
/>
<datalist id="optionsList">
{options.map((o) => (
<option key={o}>{o}</option>
))}
</datalist>
</>
);
};
export default MyForm;
onFocusではなくclearonClickを呼び出すバージョンも試したことに注意してください。これにより、handleChangesでblur（）を呼び出す必要がなくなり、タイピングの問題が解決されます。ただし、ボックスがクリアされる前にオプションのリストが表示されているように見えるため、オプションの完全なセットを表示するには、2回クリックする必要があります。
私の質問の1つについてあなたのコメントを見たので、代わりにここに回答として投稿すると思いました。
あなたのユースケースに基づいて、これがあなたが必要だと思うものです
import React, { useState } from "react";
const MyForm = () => {
const [options, setOptions] = useState(["Apples", "Oranges", "Bananas", "Grapes"]);
const handleChange = (event) => {
if (!event.nativeEvent.inputType) {
event.target.blur();
}
};
const clear = (event) => {
event.target.value = "";
};
return (
<>
<input
type="input"
list="optionsList"
onChange={handleChange}
onClick={clear}
onFocus={clear}
placeholder="Select an option"
/>
<datalist id="optionsList">
{options.map((o) => (
<option key={o}>{o}</option>
))}
</datalist>
</>
);
};
export default MyForm;
handleChangeテキスト入力が正常にブロックされないようにするにはevent.nativeEvent.inputType、をonChangeクリックしてトリガーされたdatalistものにはinputType値がないため、を確認する必要があります。したがって、この場合、入力ブラーは、入力されたときにのみ実行されdatalist、他のイベントのフォーカスを維持します。
またonClick、入力がすでにフォーカスされているかどうかに関係なく、入力をクリアするためのハンドラーを追加しました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加