当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - React Submit Event - Enter Key Not Working

问题描述:

I am currently hacking around with a small front-end react project that is hitting Soundcloud's API. Very basic as of right now, I'm just taking in some user input and querying the api endpoint for related songs. For some strange reason I cannot get the enter key to submit my form and thus fire my this.handleSubmit() method. The only way I can get it to fire is to click the button my enter functionality seems to be broken. I searched around and can't find what I'm overlooking, any assistance is greatly appreciated!

import React from 'react';

import Styles from '../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 only be submitted by enter-key when it is focus and has input|button(type="submit"). So just move input into your 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: