为了账号安全,请及时绑定邮箱和手机立即绑定

如何在使用 Axios 在 React 中实现 onClick 组件DidMount()

如何在使用 Axios 在 React 中实现 onClick 组件DidMount()

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

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

);


查看完整描述

4 回答

?
大话西游666

TA贡献1479条经验 获得超13个赞

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>


    )

  }

}


查看完整回答
反对 回复 3天前
?
神不在的星期二

TA贡献1629条经验 获得超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>

            <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


查看完整回答
反对 回复 3天前
?
慕标琳琳

TA贡献1458条经验 获得超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>

            <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,然后将标题道具传递到电影列表


查看完整回答
反对 回复 3天前
?
三国纷争

TA贡献1501条经验 获得超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>

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


查看完整回答
反对 回复 3天前
  • 4 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信