# 問題 - 下記のような検索フォームがあります - `input` に検索ワードを入力して `button` を押すと API にリクエストを送ります - 送信の形式は `https://api.example.com/search?q=〇〇` とします - サーバーからは下記のような JSON が返ってくるのでその内容をdivに展開します - `{ id: number, title: string }[]` とします - 一覧の各要素には `title` が表示されます - クエリが空の時は何も返ってきません - サーバーはとても貧弱です、極力サーバーに優しくなるよう処理を書いてください - CSSに関しては一切考慮しなくてよいです ``` +-----------+ +--------+ | input | | button | +-----------+ +--------+ +-----------------------+ | div | +-----------------------+ ``` # 備考 - 表示には何のライブラリを使っても良いものとします( jQuery、React、Vue、Angular、生 JS )。 - Ajax リクエストにも何を使っても良いものとします( axios、$.ajax、fetch、生 XHR ) - メソッド名は多少間違っててもいいですし、設問者に聞いて教えてもらって構いません。 - `input` や `button` の `class` や `id` は適当に補って構いません ```jsx import axios from 'axios'; function Response(props) { return ( <div> <h1>{props.title}</h1> </div> ) } class CodeTest extends Ract.Component { constructor(props) { super(props); this.state = { q: '', response: [], }; } getResponse() { axios.get('https://api.example.com/search', { params: { q: this.state.q, } }, res => { this.state.response = res; }); } render() { return ( <div> <form> <input type="text" value={this.state.q} onChange={ (value) => {this.state.q = value; } } > </input> <button onClick={this.getResponse()}></button> </form> { this.state.response.map(res => { return ( <Response key={res.id} title={res.title} ></Response> }); } </div> ); } } ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up