セレクトボックスで選んだ値に対応させた画像を表示させたい

Question

#解決したいこと
react-selectを用いたセレクトボックスでラベルを選択し、それに対応させた画像を表示させたいのですが、セレクトボックスの値に応じてimagesのstateを変化させたいのですが、やり方が分かりません。
途中までのソースコードは以下のとおりです.

初期状態(何も選択されてないとき)はimagesのvalue:0の値を表示させ、選択されたらそれに対応した画像を表示させたいです。

ここまでで、セレクトボックスで値をせんたくするところまでしかできていないです<img/>タグには適当に値をいれています。
handleChangeselectの中で所望の処理を実装させて適切な値を<img/>のsrcで渡したいです。

よろしくおねがいします。

class UserInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      names: [
        { value: 1, label: "A" },
        { value: 2, label: "B" },
        { value: 3, label: "C" },
        { value: 4, label: "D" }
      ],
      images: [
        { value: 0, label: "./images/0.png" },
        { value: 1, label: "./images/1.png" },
        { value: 2, label: "./images/2.png" },
        { value: 3, label: "./images/3.png" },
        { value: 4, label: "./images/4.png" }
      ],
      userImage: ""
    };
  }

  handleChangeselect = userImage => {
    this.setState({ userImage });
  };

  render() {
    return (
      <div className="User-container">
        <div className="photo-and-name">
          <img src='./images/o.png' alt="" />
          <Select
            className="select-name"
            options={this.state.names}
            styles={{
              [styleKeys]: styleFn
            }}
            placeholder="ユーザーを選択"
            onChange={this.handleChangeselect}
          />
        </div>
    );
  }
}

Comments

[m.ts10806]

「うまくいきません」だけでは何一つ問題点が伝わりません。「質問するときのヒント」を参照し他者に確実に伝える表現に調整してください

[hello_whats_up]

修正しました。ご指摘ありがとうございます。

[Y.H.]

> 途中までのソースコード
> 初期状態(何も選択されてないとき)はimagesのvalue:0の値を表示させ、選択されたらそれに対応した画像を表示させたいです。
このソースコードでは具体的にどこまでできていて何ができていないのですか？

[hello_whats_up]

@Y.H.　さん
修正しました。

Answer 1

img タグの src 属性に関数を適用させましょう。
まずは関数についてですが、

srcImage = imageId => {
  const image = this.state.images.filter(i => (i.value === imageId))[0]
  return image.label
}

とすることで、images の value の値を引数に取り、対応する label を返す関数が出来ました。
あとはタグの部分で呼ぶだけですが、おそらく undefined の時には 0 にしたいのであろうと思うので、
まず、constructorで

userImage: 0

としておいて

<img src={srcImage(this.state.userImage)} alt="" />

とするのがきれいですかね。

また、すべての画像ファイルが {番号}.png という形式で入っているのであれば、文字列結合で十分なので、images 配列は必要ないかと思います。

Comments

[hello_whats_up]

回答ありがとうございます。
現状このように実装しているのですが、画像が変更されません。
おかしい部分をご教示いただきたいです。

```
mport React from "react";
import Select from "react-select";

import "../css/CurrentUserInfo.css";

const styleKeys = [{ key: "indicatorsContainer" }];

const styleFn = base => ({
...base,
border: "5px solid #bac6d"
});

class CurrentUserInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
names: [
{ value: 0, label: "A" },
{ value: 1, label: "B" },
{ value: 2, label: "C" },
{ value: 3, label: "D" }
],

images: [
{ value: 0, label: "./images/0.png" },
{ value: 1, label: "./images/1.png" },
{ value: 2, label: "./images/2.png" },
{ value: 3, label: "./images/3.png" },
{ value: 4, label: "./images/4.png" }
],
userImage: 0
};
}

srcImage = imageId => {
const image = this.state.images.filter(i => i.value === imageId)[0];
return image.label;
};

render() {
return (
<div className="User-container">
<div className="photo-and-name">
<img src={this.srcImage(this.state.userImage)} alt="" />
<Select
className="select-name"
options={this.state.names}
styles={{
[styleKeys]: styleFn
}}
placeholder="ユーザーを選択"
onChange={this.srcImage(this.state.userImage)}
/>
</div>
</div>
);
}
}

export default CurrentUserInfo
```

[nerianighthawk]

コメント遅れてしまいすみません。
<Slect> タグの onChage はもともと使っていた handleChange 関数でよかったかと思います。

[hello_whats_up]

返信ありがとうございます。
教えていただいた方法で実装すると、srcImage関数のところで"TypeError: Cannot read property 'label' of undefined"とエラーになるのですが、なぜでしょう？

[nerianighthawk]

srcImage = imageId => {
console.log(imageId)
const image = this.state.images.filter(i => i.value === imageId)[0];
return image.label;
};
のようにして、imageIdの値を確認してもらってもよろしいでしょうか。

[hello_whats_up]

'0'が表示されているようです。

[nerianighthawk]

私の環境で、同様の処理を書くとうまくいくのですが…何度もすみません。
srcImage = imageId => {
console.log(this.state.images)
const image = this.state.images.filter(i => i.value === imageId)[0];
return image.label;
};
の結果を教えていただいてもいいですか？

[hello_whats_up]

お手数おかけして申し訳ないです。
このような結果になりました。
```
0: {value: 0, label: "./images/0.png"}
1: {value: 1, label: "./images/1.png"}
2: {value: 2, label: "./images/2.png"}
3: {value: 3, label: "./images/3.png"}
4: {value: 4, label: "./images/4.png"}
length: 5
__proto__: Array(0)
```

[nerianighthawk]

こちらも想定通りですね…なぜでしょう…一つ一つ検証したいのですが、

srcImage = imageId => {
const image = this.state.images.filter(i => i.value === imageId)[0];
console.log(image)
return image.label;
};
の結果はどうなっていますか？

[hello_whats_up]

遅くなってしまいすみません。
`undefined`のようです。

[nerianighthawk]

imageIdが文字列として入ってきている可能性がありますかね。
i.value === imageId を i.value == imageId に=を一つ減らしてうまくいくか確認してもらってもいいですか？

[hello_whats_up]

セレクトボックスを変化させてない状態では
```
{value: 0, label: "./images/0.png"}
label: "./images/0.png"
value: 0
```
が表示されており、変化させると`undefined`のようです。
先ほどと同じようですね、、、
<Select/>タグのonChangeで引数を取らせないといけなかったりしますか？

[nerianighthawk]

あー、そうですね。
必ずしも引数を取らせなくてもいいのですが、onChangeで指定した関数には引数を指定しない場合はイベントが入ると思います。
なので、値を取得する場合は
```
handleChangeselect = event => {
this.setState({ event.target.value });
};
```
とするか
もしくは<Select /> タグで
```
onChange={(e) => this.handleChangeselect(e.target.value)}
```
のように、どこかしらで、target.value を参照してあげる必要がある気がします。

[hello_whats_up]

画像を、create-react-appでapp生成時のpublicフォルダ内に保存してるのが原因かなとも考えたので、src内にimgフォルダを作って見たりもしたのですが、これだと画像も表示できませんでした。
これは関係ないのでしょうか？？

[nerianighthawk]

そこは関係ないと思います。
すみません、
```
handleChangeselect = event => {
this.setState({ event.target.value });
};
```
と書いていますが、
```
handleChangeselect = event => {
this.setState({ userImage: event.target.value });
};
```
ですね。
これでうまく行ってほしいのですが…

[hello_whats_up]

TypeError: Cannot read property 'value' of undefined
プルダウンで選択すると上のエラーが出てしまいます。

現在のコードがこれです。
画像はpublic/images/*.png から参照しています。
何が原因でだめなのかさっぱり、、、
```
import React from "react";
import Select from "react-select";

import "../css/CurrentUserInfo.css";

class CurrentUserInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
names: [
{ value: 0, label: A" },
{ value: 1, label: "B" },
{ value: 2, label: "C" },
{ value: 3, label: "D" }
],

images: [
{ value: 0, label: "./images/0.png" },
{ value: 1, label: "./images/1.png" },
{ value: 2, label: "./images/2.png" },
{ value: 3, label: "./images/3.png" },
{ value: 4, label: "./images/4.png" }
],
userImage: 0
};
this.handleChangeSelect = this.handleChangeSelect.bind(this);
}

handleChangeSelect = event => {
this.setState({ userImage: event.target.value });
};

srcImage = imageId => {
const image = this.state.images.filter(i => i.value === imageId)[0];
return image.label;
};

render() {
return (
<div className="User-container">
<div className="photo-and-name">
<img src={this.srcImage(this.state.userImage)} alt="" />
<Select
className="select-name"
options={this.state.names}
styles={{
[styleKeys]: styleFn
}}
placeholder="ユーザーを選択"
onChange={this.handleChangeSelect}
/>
</div>
</div>
);
}
}

const styleKeys = [{ key: "indicatorsContainer" }];

const styleFn = base => ({
...base,
border: "5px solid #bac6d"
});

export default CurrentUserInfo;
```

[nerianighthawk]

console.log(event.target)
でtargetの中身をみて教えてもらってもいいですか？

[hello_whats_up]

handleChangeSelectのsetStateの前ではundifined、あとでは表示されませんでした。