React Submitイベント - Enterキーが機能しない

Question

私は現在、SoundcloudのAPIに当たる小さなフロントエンドの反応プロジェクトをハッキングしています。今のところ非常に基本的なものですが、私はちょうどいくつかのユーザー入力を受け取り、関連する曲のapiエンドポイントを照会しています。いくつかの奇妙な理由で私は私のフォームを提出するエンターキーを得ることができないので、this.handleSubmit（）メソッドを起動します。私が発射する唯一の方法は、ボタンをクリックすることです。私の入力機能は壊れているようです。私は周りを検索し、私が見落としているものを見つけることができない、どんな支援も大いに感謝されます！

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; 

Answer 1

フォームは、フォーカスされ、入力ボタン（タイプ= "提出"）が入力されている場合にのみエンターキーで送信できます。だからあなたのフォームに入力を移動してください。

<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>