i hacking around small front-end react project hitting soundcloud's api. basic of right now, i'm taking in user input , querying api endpoint related songs. strange reason cannot enter key submit form , fire this.handlesubmit() method. way can fire click button enter functionality seems broken. searched around , can't find i'm overlooking, assistance appreciated!
import react 'react'; import styles '../styles/index.js' class searchbar extends react.component { constructor(props) { super(props); this.initplayer(this.props.song) }; initplayer(song){ sc.oembed(song, { auto_play: true }).then(function(song) { document.getelementbyid('player').innerhtml = song.html; }); } handlesubmit(e){ e.preventdefault(); let term = document.getelementbyid('search').value sc.get('/tracks', { q: term }) .then( (tracks) => { const song = tracks[0].permalink_url; if (tracks.length < 1) { alert('not found!'); } sc.oembed(song, { auto_play: true }).then(function(song) { document.getelementbyid('player').innerhtml = song.html; }); document.getelementbyid('search').value = ''; }); } render() { return ( <div> <div classname="col-lg-12"> <div style={styles.playerstyle} id="player"></div> <label htmlfor="search">artist:</label> <input type="text" classname="form-control" id="search" /> <div classname="text-center"> <form onsubmit={this.handlesubmit}> <button type='submit' style={styles.buttonstyle} classname="btn btn-primary">submit</button> </form> </div> <div id="player"></div> <br /> </div> </div> ); } } export default searchbar;
form can submitted enter-key when focus , has input|button(type="submit"). move input form.
<form onsubmit={this.handlesubmit}> <input type="text" classname="form-control" id="search" /> <button type='submit' style={styles.buttonstyle} classname="btn btn-primary">submit</button> </form> 
Comments
Post a Comment