如何获取选择选项值 React

Question

我的项目需要一点帮助。我想它快完成了，但我不知道如何完成......

所以，我想用输入、选择和按钮构建应用程序。例如，您可以在输入中写入mettalica，然后单击按钮应用程序呈现包含所有歌曲、标题和tabTypes（吉他标签）的列表。问题是我想从选择中获取信息并只渲染那些包括播放器标签的歌曲。

沙盒代码：https://codesandbox.io/s/react-example-ys6py?fontsize=14&hidenavigation=1&theme=dark

class Search extends React.Component {
  state = {
    searchValue: "",
    songs: [],
    musicTabs: [
      'Dowolne',
      'Bass',
      'Player',
      'Chords',
      'Guitar'
    ],
    result: ''
  };

  handleOnChange = event => {
    this.setState({ searchValue: event.target.value });
  };

  handleSelectChange = (event) => {
    this.setState({
      result: event.target.value
    })
    console.log(this.state.result)
  }

  handleSearch = () => {
    this.makeApiCall(this.state.searchValue);
  };

  makeApiCall = async searchInput => {
    let api_url = `https://www.songsterr.com/a/ra/songs/byartists.json?artists=${searchInput}`;
    const response = await fetch(api_url);
    const songs = await response.json();
    this.setState({ songs });
  };

  render() {
    return (
      <div>
        <Header />
        <input
          name="text"
          type="search"
          placeholder="Search..."
          onChange={event => this.handleOnChange(event)}
          value={this.state.SearchValue}
        />

        <Select optionValue={ this.state.musicTabs } change={ this.handleSelectChange } value={ this.state.result } />

        <br />
        <button onClick={this.handleSearch}>Search</button>


        {this.state.songs ? (
          <div>
            {
              this.state.songs.map((song, index) => (
                <div key={index} className="lists">
                  <h1>Artist: <span>{song.artist.name}</span></h1>
                  <h2>Song title: <span>{song.title}</span></h2>
                  <ol>
                    <b>Available tabs:</b>
                    {song.tabTypes.map((tab, index) =>
                      <li key={index}> {song.tabTypes[index]} </li>
                    )}

                  </ol>

                </div>
              ))


            }
          </div>
        ) : (
            <p>Something</p>
          )}
      </div>
    );
  }
}



const Select = (props) => {
  const { optionValue, change } = props;

  const valueMusicTabs = optionValue.map((musicTab, index) => {
   return <option name={ optionValue[index] } key={ index }> { optionValue[index] } </option>
  })

  return (

    <>
    <select onChange={ change }>
      { valueMusicTabs } 

    </select>

  </>

  )
};

感谢大家的帮助！

Answer 1

我认为你做的一切都是对的，只是用错了prop

<Select optionValue={ this.state.musicTabs } onChange={ this.handleSelectChange } value={ this.state.result } />

Select 组件上的 change 属性应更改为 onChange，因为它是默认事件，它将与事件一起传递给您的 handleChange 方法

Answer 2

我检查了代码框，一切正常。 this.setState 是一个异步函数。因此，如果您在this.setState 之后使用console.log，您可能不会记录更新的值。您可以使用回调函数来执行此操作。

handleSelectChange = (event) => {
    this.setState({
      result: event.target.value
    }, () => console.log(this.state.result))
  }

如果您想filter，您可以通过以下函数来实现：

filterSongs = selected => {
 return songs.filter(song => song.tabTypes === selected);
}

然后将您的handleSelectChange 修改为：

handleSelectChange = (event) => {
    let songs = filterSongs(event.target.value);
    this.setState({
      result: event.target.value,
      toDisplay: songs
    }, () => console.log(this.state.result))
  }

最后在你的JSX:

return (
  <>
    {toDisplay.map((song, index) => {
      return <p key={index}>{song.toString()}</p>
    })}
  </>
);

Answer 3

如果我理解正确的话。您想根据input 和select 的选定值从API 中获取结果。

正如我所见，您只是从输入中传递参数，而不是从选择中传递。

  handleSearch = () => {
    this.makeApiCall(this.state.searchValue);
  };

  makeApiCall = async searchInput => {
    let api_url = `https://www.songsterr.com/a/ra/songs/byartists.json?artists=${searchInput}`;
    const response = await fetch(api_url);
    const songs = await response.json();
    this.setState({ songs });
  };

新的电话将是

let api_url = `https://www.songsterr.com/a/ra/songs/byartists.json?artists=${searchInput}&tabTypes=${selectValue}`; 

我不知道这个 API 接受的参数是什么。

Answer 4

感谢您的回答！我有最后一个问题，我必须使用方法来过滤呈现的列表。如果我选择“播放器”，我只想渲染那些歌曲，其中包括 tabTypes 中的“播放器”选项卡。我仍然无法得到它。我无法通过更改 API 链接来做到这一点。