web-dev-qa-db-ja.com

ReactでUndefinedを返すe.target.valueに問題がある

Imgをクリックしてクリック可能な名前のリストを表示できる機能があります。名前をクリックすると、その人物の画像が元のimgの代わりになるはずです。アーティストAPIを使用していて、コンソールでエラーが表示されるのではなく、画像がアーティスト名のimgに変わります。名前が「未定義」です...奇妙です。大きな修正ではないかもしれませんが、しばらくの間、この問題に悩まされてきました。

searchForArtist(query) {
    request.get(`https://api.spotify.com/v1/search?q=${query}&type=artist`)
      .then((response) => {
        const artist = response.body.artists.items[0];
        const name = artist.name;
        const id = artist.id;
        const img_url = artist.images[0].url;
        this.setState({
          selectedArtist: {
            name,
            id,
            img_url,
          },
        });
      })
      .then(() => {
        this.getArtistAlbums();
      })
      .catch((err) => {
        console.error(err);
      });
  }

  getSubsequentCollabs(artist) {
    this.setState({
      selectedArtist: {},
      selectedAlbums: {},
      artistCounts: {},
    });
    console.log(artist);
    this.searchForArtist(artist);
  }

  artistOnClick(e) {
    console.log(e);
    let artist = e.target.value;
    this.getSubsequentCollabs(artist);
  }

これを行う別のコンポーネントがあります：

const Artist = ({name, artistOnClick}) => {
  return (
    <div name={name} onClick={artistOnClick}>
      {name}
    </div>
  )
}

export default Artist;
reactjsonclicktarget
7
Mshark

event.targetは、ターゲットのHTML要素を提供します。 JavaScriptは、Nodeのすべての属性をevent.targetのプロパティとして作成します。

例えば：

<div id="hello">Hello</div>

e.target.id //returns 'hello'

inputsのような特殊なケースがあり、プロパティvalueは暗黙的に使用されます。ただし、他のHTML要素の場合は、属性を明示的に指定する必要があります。

したがって、HTMLは次のようになります。

const Artist = ({name, artistOnClick}) => {
  return (
    <div value={name} onClick={artistOnClick}>
      {name}
    </div>
  )
}

e.target.value //return the name

OR

const Artist = ({name, artistOnClick}) => {
  return (
    <div onClick={() => artistOnClick(name)}>
      {name}
    </div>
  )
}

e.target.name //returns the name

お役に立てれば！

6
Pranesh Ravi

Div要素にはvalue属性がないため、特定のクリックイベントのイベントオブジェクトの裏側では何も通過できません。

何が起こるかを予想して、次のような方法でそれに取り組むことができます。

const Artist = ({name, artistOnClick}) => {
  return (
    <div onClick={() => artistOnClick(name)}>
      {name}
    </div>
  )
}

export default Artist;
3
Chris

同様の問題が発生し、入力フィールドがe.target.valueに対して未定義を返していました

私はそれを解決しました

onChange={this.mymethod.bind(this)}

他の人の役に立つことを願っています。

1
Kelly Kristine

React e.target.valueは、別の変数に保存されていない場合、nullと表示されます。例：

const onChange = e => {
    console.log(e.target.value);
    setState(
        blah: e.target.value
    )
}

上記の例では、console.log（e.target.value）が値として表示されますが、setStateではe.target.valueは未定義になります。

E.target.valueを使用するには、新しい変数に保存する必要があります。

const eTarget = e.target.value;

Reactはイベントプーリングを使用します。 ここでそれを読んでください：

ドキュメントから：

Note:

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
0
FabricioG