私はしばらくの間react-selectをうまく使っていますCreatable
が、コンポーネントのバージョンに関して問題があります。
これが私のコードです:
const options = [
{
label: 'One',
value: 'One'
},
{
label: 'Two',
value: 'Two'
},
{
label: 'Three',
value: 'Three'
},
{
label: 'Four',
value: 'Four'
}
];
const selectedItems = [
{
label: 'One',
value: 'One'
}
];
const App = () => (
<div style={styles}>
<Select.Creatable
backspaceRemoves={true}
multi
openOnFocus={false}
openOnClick={false}
onSelectResetsInput={false}
onBlurResetsInput={false}
onCloseResetsInput={false}
arrowRenderer={() => null}
clearRenderer={() => null}
options={options}
value={selectedItems} />
</div>
);
私はこれの実行可能なバージョンもここで作成しました:https://codesandbox.io/s/q27lnon96
サンドボックスページにアクセスするとわかるように、ユーザーがクリックすると、選択に入力されたテキストはすべて消えます。選択に再びフォーカスが与えられると、再表示されます。
明確にするために、私の質問は入力に入力されたテキスト「two」についてです-それは選択された値の問題ではありません(正しい状態とコールバックが構成されている場合、これらは正常に機能します)。
どうすればreact-selectに入力の内容を保存させることができますか?内部的に値を記憶しているように見えますが、フォーカスがなくなったときにテキスト入力を非表示にします。さまざまなonFooResetsInput
すべてをfalseに設定することでこれを達成できると思いましたが、うまくいきませんでした。
私のアプリケーションは、この入力に入力されたテキストの値を使用してUIの他の要素に影響を与えているため、テキストが非表示になっていると同期していないように見えます。
onChangeイベントを処理し、selectedItemsをコンポーネント状態の一部にする必要があります。あなたの場合、selectedItemsは決して変更されません。
https://codesandbox.io/s/pyo17y6qv7を見てください
編集
はい、inputRendererで動作します。関数のデフォルト引数は値を入力に渡します(これが、onBlurの場合、値 ''が入力に渡されるため、入力値が消える理由です。onBlurResetsInputフラグがfalseであるため、react-selectのバグの可能性があります)。自分の入力に渡す前に削除する必要があります。https://codesandbox.io/s/54on0mr984の更新されたコード
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加