首頁猿問如何在使用 Axios 在...

如何在使用 Axios 在 React 中實現 onClick 組件DidMount（）

JavaScript

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

我正在嘗試使用 React、Axios 和電影數據庫 API 制作電影搜索功能。我現在嘗試實現的功能是在搜索欄中鍵入電影，然后單擊提交按鈕將電影標題作為H1元素返回。我的點擊功能不起作用：<button onClick={(e)=>clickHandler()}>submit</button>componentDidMount（）僅在頁面刷新時工作，并且由于提交按鈕損壞而無法搜索任何內容。我不確定如何實現這一點，但我也不會介意我是否可以通過按回車鍵而不是使用按鈕來搜索它，以更容易為準。這是我到目前為止的代碼。應用.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貢獻1817條經驗獲得超14個贊

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>

)

}

反對回復 2022-09-23

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

點擊按鈕后，您應該調用API以獲取電影列表，然后將必須的數據傳遞給。試試這個：

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

反對回復 2022-09-23

慕標琳琳

TA貢獻1830條經驗獲得超9個贊

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

只需將調用 API 句柄移動到您的 onclik func，然后將標題道具傳遞到電影列表

反對回復 2022-09-23

三國紛爭

TA貢獻1804條經驗獲得超7個贊

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

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”進行提交。

反對回復 2022-09-23

4 回答
0 關注
197 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在使用 Axios 在 React 中實現 onClick 組件DidMount（）

如何在使用 Axios 在 React 中實現 onClick 組件DidMount（）

4 回答

添加回答