首頁(yè) 猿問如何在使用 Axios 在...

如何在使用 Axios 在 React 中實(shí)現(xiàn) onClick 組件DidMount（）

JavaScript

Smart貓小萌 2022-09-23 17:10:13

我正在嘗試使用 React、Axios 和電影數(shù)據(jù)庫(kù) API 制作電影搜索功能。我現(xiàn)在嘗試實(shí)現(xiàn)的功能是在搜索欄中鍵入電影，然后單擊提交按鈕將電影標(biāo)題作為H1元素返回。我的點(diǎn)擊功能不起作用：<button onClick={(e)=>clickHandler()}>submit</button>componentDidMount（）僅在頁(yè)面刷新時(shí)工作，并且由于提交按鈕損壞而無(wú)法搜索任何內(nèi)容。我不確定如何實(shí)現(xiàn)這一點(diǎn)，但我也不會(huì)介意我是否可以通過按回車鍵而不是使用按鈕來(lái)搜索它，以更容易為準(zhǔn)。這是我到目前為止的代碼。應(yīng)用.jsimport React from "react"import Movielist from './components/Movielist'function App() { return ( <div> <input type="search" id="search" /> <button onClick={(e)=>clickHandler()}>submit</button> <h1 id="title">title</h1> <Movielist /> </div> )}export default App電影列表.jsimport React from 'react';import axios from 'axios';export default class Movielist extends React.Component { state = { title: "" } componentDidMount() { const API_KEY = '***********************'; const query = document.getElementById('search').value; axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`) .then(res => { const title = res.data['results'][0]['title']; this.setState({ title }); }) } render() { return ( <h1>{this.state.title}</h1> ) }}索引.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <App />, document.getElementById('root'));

查看完整描述

4 回答

大話西游666

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊

import React from 'react';

import axios from 'axios';

export default class Movielist extends React.Component {

state = {

title: ""

}

clickHandler = (event) => {

if (event.keyCode === 13) {

const query = event.target.value;

const API_KEY = '***********************';

axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)

.then(res => {

const title = res.data['results'][0]['title'];

this.setState({ title });

})

}

render() {

return (

<input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />

<h1>{this.state.title}</h1>

)

}

反對(duì) 回復(fù) 2022-09-23

神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

點(diǎn)擊按鈕后，您應(yīng)該調(diào)用API以獲取電影列表，然后將必須的數(shù)據(jù)傳遞給。試試這個(gè)：

在：MovielistApp.js

import React from "react"

import axios from 'axios'

import Movielist from './components/Movielist'

function App() {

const [movieList, setMovieList] = React.useState([])

const handleOnSubmit = () => {

const API_KEY = '***********************';

const query = document.getElementById('search').value;

axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)

.then(res => {

const title = res.data['results'][0]['title'];

setMovieList(res.data['results'])

})

}

return (

<div>

<button onClick={handleOnSubmit}>submit</button>

<h1 id="title">title</h1>

</div>

)

}

export default App

在：Movielist.js

import React from 'react';

const Movielist = ({movieList}) => {

return (

<div>

{

movieList.map(movie => <h1 key={movie.key}>{movie.title}</h1>)

}

<div/>

)

}

export default Movielist

反對(duì) 回復(fù) 2022-09-23

慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊

import React, {useState} from "react"

import axios from 'axios';

import Movielist from './components/Movielist'

const [title, setTitle] = useState("")

const API_KEY = '***********************'

function App() {

const clickHandler = () => {

const query = document.getElementById('search').value;

axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)

.then(res => {

const title = res.data['results'][0]['title'];

setTitle(title);

})

}

return (

<div>

<button onClick={clickHandler}>submit</button>

<h1 id="title">title</h1>

</div>

)

}

export default App

只需將調(diào)用 API 句柄移動(dòng)到您的 onclik func，然后將標(biāo)題道具傳遞到電影列表

反對(duì) 回復(fù) 2022-09-23

三國(guó)紛爭(zhēng)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊

如果要在用戶按下提交按鈕后查詢 API。您應(yīng)該在調(diào)用處理程序中調(diào)用 API，然后將狀態(tài)從應(yīng)用程序傳遞到電影列表作為道具

export class App extends React.Component {

state = {

title: ""

}

clickHandler() {

const API_KEY = '***********************';

const query = document.getElementById('search').value;

axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`).then(res => {

const title = res.data['results'][0]['title'];

this.setState({ title });

});

}

render() {

return (

<div>

<button onClick={(e)=>clickHandler()}>submit</button>

<h1 id="title">title</h1>

</div>

)

}

export class MovieList extends React.Component {

render() {

<h1>{this.props.title}</h1>

}

或者，您可以將輸入包裝在元素中，并使用 onSubmit + evt.preventDefault（）代替，通過這樣做，您可以處理按鈕單擊并按“Enter”進(jìn)行提交。

反對(duì) 回復(fù) 2022-09-23

4 回答
0 關(guān)注
171 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何在使用 Axios 在 React 中實(shí)現(xiàn) onClick 組件DidMount（）

如何在使用 Axios 在 React 中實(shí)現(xiàn) onClick 組件DidMount（）

4 回答

添加回答