如何获取 select 选项值 React

Question

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

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

沙盒代码：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

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

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.

的 selected 值从 API 获得结果

正如我所见，您只是从 select.

的 input nothing 传递参数

  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

感谢解答！我有最后一个问题，我必须在哪里使用方法来过滤呈现的列表。如果我 select "Player" 我只想渲染那首歌曲，它在 tabTypes 中包含 "Player" 标签。我还是搞不懂。我无法通过更改 API link.

来做到这一点

如何获取 select 选项值 React

How to get select option value React

reactjs

select

input

fetch

option