web-dev-qa-db-ja.com

フォームの選択フィールドonChangeにオブジェクト値を渡す方法（Reactを使用、Reduxなし）

私は現在、単純なフォームのreactコンポーネントに取り組んでいます（reduxはなく、スタイリングにreact-bootstrapを使用するだけです）

次の形式でデータベースからデータを取得しています。

[
  {
    "id":"123",
    "name":"Amy Pond",
    "age":"22",
    "reputation":22000
  },
  {
    "id":"124",
    "name":"Clara Oswald",
    "age":"24",
    "reputation":35000
 }
 ...
]

そしてそれをオブジェクトに入れます：

let userlist = [];
userlist = addUsers(this.state.users);

このデータに基づいてマップを使用してドロップダウンにデータを入力し、ユーザーの状態をド​​ロップダウンから選択した状態に正しく設定できます。

<FormControl
   id = "user"
   componentClass="select"
   onChange={this.handleChange}
>
   {userlist.map((r , i) =>
     <option
       key={i}
       value={r.name}>
       {r.name}
     </option>
  )}
</FormControl>

handleChange（）の使用

handleChange(event) {
  this.setState({
    value: event.target.value,
    // reputation: ???? // here's where I'm running into issues
    // age: ???????  // and here
});

私の問題は、それに応じて状態を設定するために、handleChange関数でユーザーの年齢と評判が必要なことです。 r.nameの代わりにrだけを渡そうとしましたが、[object Object]が返されます。

console.log ("Handle Change Value: " + event.target.value);

event.target.value.nameを試してみると、undefinedが返されます。

これまでのところ、JSON.stringifyを使用しているだけですが、これは正しい方法ではないと思います。名前だけを取得したら、オブジェクトを検索することも考えましたが、オブジェクトがたくさんあると、非常に非効率になると思いますか？どうすればいいのかもわかりません。

状態を設定できるように、これら2つの追加値を渡す方法を見つけるのを手伝ってもらえますか？マップはオプションを作成するための最良の方法でさえありますか？正直なところ、これはとても単純なことだと思いますが、私はまだ反応するのが初めてで、これに長い間苦労してきました！

これをより良くするためのアイデア/変更/コメント/方法は大歓迎です！おそらくredux-formのようなものを使用するとこれが簡単になると思いますが、今のところそれなしでそれを行う簡単な方法があることを望んでいます。

編集： onChangeはonChange = {this.handleChange}に設定されているはずですが、トラブルシューティングの試みから間違ったコードを貼り付けただけです。私はこれをコンストラクターでバインドしています：

constructor(props) {
  super(props);
  ...
  this.handleChange = this.handleChange.bind(this);
}
javascriptreactjsreact-bootstrap
6
RatKing

各optionの値としてユーザーIDを使用し、次にhandleChangeでuserlistでユーザーを見つけて、すべてのユーザーのプロパティにアクセスします。

_<FormControl
   id = "user"
   componentClass="select"
   onChange={this.handleChange.bind(this)}
>
   {userlist.map((r , i) =>
     <option
       key={i}
       value={r.id}>
       {r.name}
     </option>
  )}
</FormControl>

handleChange(event) {
  const userId = event.target.value;
  const user = userlist.find(u => u.id === userId);
  this.setState({
    value: user
  });
}
_

また、onChangeプロパティを渡す方法で問題が発生する可能性があります。すべてのコードを見ずに判断するのは難しいですが、handleChange関数（上記の私の回答を参照）への参照を、その場で呼び出すのではなく、必ず渡してください（質問のように：onChange={this.handleChange()}、_this.handleChange_関数が関数を返さない限り）。

5
forrert

オプションタグ属性とjsonを使用して、次のようにエンコード/デコードできます。

<FormControl
        id="user"
        componentClass="select"
        onChange={this.handleChange.bind(this)}
    >
        {userlist.map((r, i) =>
            <option
                key={i}
                value={r.id}>
                {r.name}
                data={JSON.stringify(r)}
            </option>
        )}
    </FormControl>;

    handleChange(event)
    {
        if (e.target.options && e.target.selectedIndex) {
            const user = e.target.options[e.target.selectedIndex].getAttribute('data');
            this.setState({
                value: user
            });
        }
    }
0
Mahdi Hasanpour