如何在使用 Axios 在 React 中实现 onClick 组件DidMount（）

Question

我正在尝试使用 React、Axios 和电影数据库 API 制作电影搜索功能。我现在尝试实现的功能是在搜索栏中键入电影，然后单击提交按钮将电影标题作为H1元素返回。

我的点击功能不起作用：<button onClick={(e)=>clickHandler()}>submit</button>

componentDidMount（） 仅在页面刷新时工作，并且由于提交按钮损坏而无法搜索任何内容。

我不确定如何实现这一点，但我也不会介意我是否可以通过按回车键而不是使用按钮来搜索它，以更容易为准。

这是我到目前为止的代码。

应用.js

import 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

电影列表.js

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

    )

  }

}

索引.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

    <App />,

    document.getElementById('root')

);

Answer 1

import React from 'react';import axios from 'axios';export default class Movielist extends React.Component {&nbsp; state = {&nbsp; &nbsp; title: ""&nbsp; }&nbsp; &nbsp; clickHandler = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; if (event.keyCode === 13) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const query = event.target.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const API_KEY = '***********************';&nbsp; &nbsp; axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)&nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; const title = res.data['results'][0]['title'];&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ title });&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; render() {&nbsp; &nbsp; return (<input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />&nbsp; &nbsp; <h1>{this.state.title}</h1>&nbsp; &nbsp; )&nbsp; }}

Answer 2

点击按钮后，您应该调用API以获取电影列表，然后将必须的数据传递给。试试这个：在 ：MovielistApp.jsimport React from "react"import axios from 'axios'import Movielist from './components/Movielist'function App() {&nbsp; &nbsp; const [movieList, setMovieList] = React.useState([])&nbsp; &nbsp; const handleOnSubmit = () => {&nbsp; &nbsp; &nbsp; const API_KEY = '***********************';&nbsp; &nbsp; &nbsp; const query = document.getElementById('search').value;&nbsp; &nbsp; &nbsp; axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)&nbsp; &nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const title = res.data['results'][0]['title'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setMovieList(res.data['results'])&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="search" id="search" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleOnSubmit}>submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="title">title</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Movielist movieList={movieList}/>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}export default App在：Movielist.jsimport React from 'react';const Movielist = ({movieList}) => {&nbsp; &nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; movieList.map(movie => <h1 key={movie.key}>{movie.title}</h1>)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; <div/>&nbsp; &nbsp; )&nbsp; }}export default Movielist

Answer 3

import React, {useState} from "react"import axios from 'axios';import Movielist from './components/Movielist'const [title, setTitle] = useState("")const API_KEY = '***********************'function App() {&nbsp; const clickHandler = () => {&nbsp; &nbsp; const query = document.getElementById('search').value;&nbsp; &nbsp; axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)&nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; const title = res.data['results'][0]['title'];&nbsp; &nbsp; &nbsp; setTitle(title);&nbsp; &nbsp; })&nbsp;}&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="search" id="search" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={clickHandler}>submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="title">title</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Movielist title={title} />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}export default App只需将调用 API 句柄移动到您的 onclik func，然后将标题道具传递到电影列表

Answer 4

如果要在用户按下提交按钮后查询 API。您应该在调用处理程序中调用 API，然后将状态从应用程序传递到电影列表作为道具export class App extends React.Component {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; title: ""&nbsp; &nbsp; }&nbsp; &nbsp; clickHandler() {&nbsp; &nbsp; &nbsp; &nbsp; const API_KEY = '***********************';&nbsp; &nbsp; &nbsp; &nbsp; const query = document.getElementById('search').value;&nbsp; &nbsp; &nbsp; &nbsp; axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`).then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const title = res.data['results'][0]['title'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ title });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="search" id="search" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={(e)=>clickHandler()}>submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="title">title</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Movielist list={this.state.title}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export class MovieList extends React.Component {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h1>{this.props.title}</h1>&nbsp; &nbsp; }}或者，您可以将输入包装在元素中，并使用 onSubmit + evt.preventDefault（）代替，通过这样做，您可以处理按钮单击并按“Enter”进行提交。