ReactでAJAXリクエストに入力値を渡す

Question

githubでリポジトリを検索できるようにするためにGithub Search APIを使用しています。私はReactを使用しており、これのすべてに全く新しいものです。 入力値をAJAXリクエストに渡して、特定の名前のリポジトリのみを要求します。 Reactを使って入力値を渡す方法はありますか？

class SearchBox extends React.Component { 

constructor(props) { 
    super(props); 
    this.onKeyUp = this.onKeyUp.bind(this); 
    this.onChange = this.onChange.bind(this); 
} 



render() { 
    return(
     <form> 
      <input type="text" className="searchbox" onChange={this.onChange} onKeyUp={this.onKeyUp} /> 
       <ul className="suggestions"> 
     <li>Filter for a city</li> 
     <li>or a state</li> 
    </ul> 
     </form> 
    ); 
} 

    onChange(event) { 
     const matchArray = findMatches(this.value, repositories); 
const html = matchArray.map(place => { 
    const regex = new RegExp(this.value, "gi"); 
    const cityName = place.city.replace(regex, `<span className="hl">${this.value}</span>`); 
    const stateName = place.state.replace(regex, `<span className="hl">${this.value}</span>`); 
    return ` 
    <li> 
    <span className="name">${cityName}, ${stateName}</span> 

    </li> 
    `; 
}).join(''); 
console.log(matchArray); 


} 

onKeyUp(event) { 
     const matchArray = findMatches(this.value, repositories); 
const html = matchArray.map(place => { 
    const regex = new RegExp(this.value, "gi"); 
    const cityName = place.name.replace(regex, `<span className="hl">${this.value}</span>`); 

    return ` 
    <li> 
    <span class="nameName">${cityName}, </span> 

    </li> 
    `; 
}).join(''); 
console.log(matchArray); 


} 
} 

ReactDOM.render(
<SearchBox />, 
document.getElementById("searching") 
); 

JS

const endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm; 
const repositories = []; 

fetch(endpoint) 
.then(blob => blob.json()) 
.then(data => repositories.push(...data)); 

function findMatches(wordToMatch, repositories) { 
return repositories.filter(place => { 

    const regex = new RegExp(wordToMatch, "gi"); 
    return place.city.match(regex) || place.state.match(regex); 
}); 
}; 

あなたが見ることができるようにだから私は、検索語と呼ばれる変数に入力値を渡したいです。

Answer 1

参照するDOM要素にref属性を追加できます。次に、あなたの反応コンポーネントのその要素を参照することができます。あなたは

<input type="text" ref={(input) => { this.searchBox = input; }} className="searchbox" ... /> 

を次のように検索ボックスにrefを追加し、それがthis.searchBox.valueとして、あなたの反応コンポーネントの値を参照することができますあなたの場合は

。

反応状態を使用してアプリケーションの状態を管理する場合は、コンポーネントにフェッチ要求を入れる必要があることに注意してください。これをやりたくない場合は、アプリの状態管理のためにFluxまたはReduxを見ることをお勧めします。あなたのコメントに基づいて

編集

私は1つがref属性http://codepen.io/DeividasK/pen/PpZpNLを使用して入力フィールドの値を参照することができる方法を説明するcodepenを作成しました。