如何將值 onClick 從不同的組件分配給 React 中的另一個組件

Question

我想做的事：

• 當我單擊我的按鈕時，即在Navbar.js中Search我想在變量urlQuery中分配搜索文本，這樣我就可以將它作為道具傳遞到Episodes.js組件中
• 最終目標是以某種方式將 urlQuery 從Navbar.js傳遞到Episodes.js組件，這樣我就可以查詢 REST api

我如何實現所需的行為請幫助

應用程序.js

import React, { useState } from 'react';
import './App.css'
import Episodes from './components/Episodes/Episodes'
import CustomNavbar from './components/Navbar/Navbar'
import Pagination from './components/Pagination/Pagination'
function App() {

  const [postsPerPage] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);

  const url=`https://rickandmortyapi.com/api/episode?page=${currentPage}`
  let urlQuery = `https://rickandmortyapi.com/api/episode?name=${SEARCH TEXT HERE}`

  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <div>
      <CustomNavbar />
      <Episodes
      urlQuery={urlQuery}
      url={url}
      />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={36}
        paginate={paginate}
      />
    </div>
  );
}

export default App;

導航欄.js

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormControl from 'react-bootstrap/FormControl';

const customNavbar = () => {

  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">Rick And Morty</Navbar.Brand>
      <Form inline>
        <FormControl type="text" placeholder="Search" />
        <Button>Search</Button>
      </Form>
    </Navbar>
  );
}
export default customNavbar

編輯

根據 Zohaib 的建議，拋出了這個錯誤

Failed to compile.

./src/components/Navbar/Navbar.js
  Line 14:48:  Unexpected use of 'event'  no-restricted-globals

Search for the keywords to learn more about each error.   

Answer 1

你的意思是這樣的嗎？

Answer 2

應用程序.js

import React, { useState, useEffect } from 'react';
import './App.css'
import Episodes from './components/Episodes/Episodes'
import CustomNavbar from './components/Navbar/Navbar'
import Pagination from './components/Pagination/Pagination'
function App() {

  const [postsPerPage] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);
  const [userSearchValue, setUserSearchValue] = useState('');

  const [url, setUrl] = useState(``);
  const [urlQuery, setUrlQuery] = useState(``)

  useEffect(() => {
    setUrl(`https://rickandmortyapi.com/api/episode?page=${currentPage}`)
  }, [currentPage]);

  useEffect(() => {
    setUrlQuery(`https://rickandmortyapi.com/api/episode?name=${userSearchValue}`)
  }, [userSearchValue])

  const paginate = pageNumber => setCurrentPage(pageNumber);

  const handleButtonClick = (searchValue) => {
      setUserSearchValue(searchValue);
  }

  return (
    <div>
      <CustomNavbar
      onButtonClick={handleButtonClick}
      />
      <Episodes
      urlQuery={urlQuery}
      url={url}
      />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={36}
        paginate={paginate}
      />
    </div>
  );
}

export default App;

導航欄.js

import React, { useState } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormControl from 'react-bootstrap/FormControl';

const customNavbar = ({ onButtonClick }) => {

    const [searchValue, setSearchValue] = useState('');

  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">Rick And Morty</Navbar.Brand>
      <Form inline>
        <FormControl type="text" placeholder="Search" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
        <Button onClick={() => onButtonClick(searchValue)}>Search</Button>
      </Form>
    </Navbar>
  );
}
export default customNavbar

這里的重要部分是您將handleButtonClick function 傳遞給子組件 (Navbar)。 通過這種方式，您可以隨時在子組件中調用該父組件 function（即，當用戶單擊提交按鈕時）。

Answer 3

有一個關於這個特定問題的 React 指南： Lifting State Up 。

通常你所做的是管理父級中的 state。 在本例中，您管理搜索文本 state 的App 。您將 function 傳遞給組件以更改此 state。依賴於此 state 的組件通過屬性傳遞值。

這是一個例子：

 const {useEffect, useState} = React; function App() { const episodesURL = "https://rickandmortyapi.com/api/episode"; const [page, setPage] = useState(1); const [pageInfo, setPageInfo] = useState({}); const [searchText, setSearchText] = useState(""); const [episodes, setEpisodes] = useState([]); useEffect(() => { const url = new URL(episodesURL); url.searchParams.set("page", page); if (searchText) url.searchParams.set("name", searchText); fetch(url).then(response => response.json()).then(response => { if (response.error) { setPageInfo({}); setEpisodes([]); } else { setPageInfo(response.info); setEpisodes(response.results); } }); }, [page, searchText]); const search = searchText => { setSearchText(searchText); setPage(1); }; return ( <div> <CustomNavbar search={search} /> <Episodes episodes={episodes} /> <Pagination setPage={setPage} info={pageInfo} /> </div> ); } function CustomNavbar({search}) { const [searchText, setSearchText] = useState(""); const handleFormSubmit = event => { event.preventDefault(); search(searchText); }; return ( <form onSubmit={handleFormSubmit}> <input type="text" placeholder="search" value={searchText} onChange={event => setSearchText(event.target.value)} /> <button type="submit">Search</button> </form> ); } function Episodes({episodes}) { return ( <table> <thead> <tr> <th>episode</th> <th>name</th> <th>air date</th> </tr> </thead> <tbody> {episodes.map(episode => ( <tr key={episode.id}> <td>{episode.episode}</td> <td>{episode.name}</td> <td>{episode.air_date}</td> </tr> ))} </tbody> </table> ); } function Pagination({setPage, info}) { return ( <div> {info.prev && <a onClick={() => setPage(page => page - 1)}>previous</a>} {info.next && <a onClick={() => setPage(page => page + 1)}>next</a>} </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

 th { text-align: left; } a { cursor: pointer; }

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 4

將 urlQuery 更改為 state 變量。 然后，將 setUrlQuery 作為道具傳遞給 NavBar，並在搜索按鈕的 clickEvent 上調用 setUrlQuery function。