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

Question

我正在尝试使用 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'));

Answer 1

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>

    )

  }

}

Answer 2

点击按钮后，您应该调用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>

            <input type="search" id="search" />

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

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

            <Movielist movieList={movieList}/>

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

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() {

  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>

            <input type="search" id="search" />

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

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

            <Movielist title={title} />

        </div>

    )

}

export default App

只需将调用 API 句柄移动到您的 onclik func，然后将标题道具传递到电影列表

Answer 4

如果要在用户按下提交按钮后查询 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>

                <input type="search" id="search" />

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

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

                <Movielist list={this.state.title}/>

            </div>

        )

    }

}

export class MovieList extends React.Component {

    render() {

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

    }

}

或者，您可以将输入包装在元素中，并使用 onSubmit + evt.preventDefault（）代替，通过这样做，您可以处理按钮单击并按“Enter”进行提交。