如何获取 select 选项值 React
How to get select option value React
我的项目需要一点帮助。我觉得快完成了,但我不知道如何完成...
所以,我想构建带有输入、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>
</>
)
};
感谢大家的帮助!
我觉得你做的都对,只是用错了prop
<Select optionValue={ this.state.musicTabs } onChange={ this.handleSelectChange } value={ this.state.result } />
Select
组件上的 change
道具应该改为 onChange
因为它是默认事件,它将与事件一起传递给您的 handleChange
方法
我检查了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>
})}
</>
);
如果我没理解错的话。您希望根据 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接受的参数是什么。
感谢解答!我有最后一个问题,我必须在哪里使用方法来过滤呈现的列表。如果我 select "Player" 我只想渲染那首歌曲,它在 tabTypes 中包含 "Player" 标签。我还是搞不懂。我无法通过更改 API link.
来做到这一点
我的项目需要一点帮助。我觉得快完成了,但我不知道如何完成...
所以,我想构建带有输入、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>
</>
)
};
感谢大家的帮助!
我觉得你做的都对,只是用错了prop
<Select optionValue={ this.state.musicTabs } onChange={ this.handleSelectChange } value={ this.state.result } />
Select
组件上的 change
道具应该改为 onChange
因为它是默认事件,它将与事件一起传递给您的 handleChange
方法
我检查了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>
})}
</>
);
如果我没理解错的话。您希望根据 input
和 select
.
正如我所见,您只是从 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接受的参数是什么。
感谢解答!我有最后一个问题,我必须在哪里使用方法来过滤呈现的列表。如果我 select "Player" 我只想渲染那首歌曲,它在 tabTypes 中包含 "Player" 标签。我还是搞不懂。我无法通过更改 API link.
来做到这一点