0

私は3つのテキストボックスを持っています。ドロップダウンメニューが1つあります。

アプリが起動またはページが読み込まれると、テキスト ボックスが空になり、ドロップダウンにさまざまな製品が表示されます。

ドロップダウン リストからアイテムを選択すると、そのオブジェクトがテキスト フィールドにロードされて編集されます。

プロパティ (this.props) を使用すると、データはテキスト ボックスに正しく読み込まれますが、代わりに状態を使用して行う必要があるため、テキストを編集できません。

しかし、状態 (this.state) を使用すると、コンポーネントは決して同期しません。ドロップダウンからアイテム 1 を選択すると、状態にロードされますが、ドロップダウン リストから別のアイテムを選択するまで画面にレンダリングされません。

したがって、アイテム 2 を選択すると、アイテム 1 がテキスト ボックスに読み込まれます。

React ドキュメントからの引用。

「setState() はすぐに this.state を変更しませんが、保留中の状態遷移を作成します」

皆さんはこれにどのように対処していますか？全部試した感じです。

4

1 に答える 1

1

親コンポーネントの状態を保持する必要があります。親は、これらすべてのテキスト ボックスとドロップダウン メニューの親になります。そこから、コールバック関数を props としてテキスト ボックスとドロップダウン コンポーネントに渡すだけです。そのコールバック関数では、選択したドロップダウン メニュー項目をパラメーターとして指定する必要があります。関数が呼び出されたら、テキスト ボックスの内容を更新する必要があります。3 つのテキスト ボックスの状態、つまり現在表示されているテキストを保持することで、これを行うことができると思います。最初は状態が定義されていないため、空と表示されます。状態では、インデックスと値を追跡できます。

その後、コールバック関数もテキスト ボックスに渡す必要があります。これらのコールバック関数は、フィールドを編集すると、ドロップダウン メニュー項目の内容を追跡および更新します。編集するときは、コールバックを呼び出して状態を更新し、ドロップダウン メニューを新しいコンテンツで再度レンダリングします。

于 2016-02-29T22:20:23.850 に答える