Question

我已经在我的应用程序中运行了last.fm API，我正在抓住相关的艺术家。因此，您的想法是搜索艺术家并返回相关艺术家的列表。

如果我使用'onClick'它完美，因为它抓取输入值，但我想使用'onChange'，它似乎返回错误的结果。我认为这是因为它在某些阶段还是未定义的东西！

任何想法如何解决这个问题？

// AJAX

import axios from "axios";

module.exports = {
  fetchArtistCategory: (artist) => {
    let key = "12345";
    let encodedURI = window.encodeURI('http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=' + artist + '&api_key=' + key + '&format=json');
    return axios.get(encodedURI)
    .then((res) => {
      return res
    });
  }
}

// App

import React from "react";
import {render} from "react-dom";
import Artists from "./components/Artists.js";
import Api from "./components/Api.js";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      artist: [],
    }

    this.searchArtist = this.searchArtist.bind(this);
  }
  componentDidMount() {

  }
  searchArtist() {
    Api.fetchArtistCategory(this.searchArtists.value)
    .then((res) => {
      this.setState({
        artist: res.data.similarartists.artist
      });
    })
  }
  render() {
    return (
      <div>
        <Artists artistValue={this.state.artist} />
        <input type="text" placeholder="Search artist" ref={(ref) => this.searchArtists = ref} onChange={this.searchArtist} />
        <input type="submit"/>
      </div>
    )
  }
}

render(<App />, document.getElementById("main"));

Answer 1

如果不知道“返回错误的结果”是什么意思，很难诊断出你的问题。我最初的猜测是你正在考虑onChange错误。

onchange会针对每个文字更改触发。如果我在你的文本字段中键入“Bob Dylan”，onChange将在我输入时为每次更改触发一次（例如“B”，“Bo”，“Bob”，“Bobe”，“Bob”（删除e）， “鲍勃”......）。因此，您将触发大量API请求。这适用于自动完成，但需要限速，智能响应排序等，并且与您的用例不同。

听起来你只想在用户完成他们的想法后发出一个API请求。要执行此操作，您应该尝试onfocusout或onblur属性 - 正如其名称所暗示的那样，当用户完成输入并离开文本字段时，它们将会触发。

Answer 2

你不应该通过onChange处理程序传递一个事件吗？

searchArtist(event) {
    Api.fetchArtistCategory(event.target.value)
    .then((res) => {
      this.setState({
        artist: res.data.similarartists.artist
      });
    })
  }

^如果其他一切正确

，那么你应该改变的唯一一段代码

除非我误解，否则你需要参考。您可以在事件处理程序内获取输入字段的值event.target.value。

React.js - onChange undefined

2 个答案: