[英]How to assign value onClick from different component to another component in React
我想做的事:
Navbar.js
中Search
我想在变量urlQuery
中分配搜索文本,这样我就可以将它作为道具传递到Episodes.js
组件中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.
你的意思是这样的吗?
应用程序.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(即,当用户单击提交按钮时)。
有一个关于这个特定问题的 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>
将 urlQuery 更改为 state 变量。 然后,将 setUrlQuery 作为道具传递给 NavBar,并在搜索按钮的 clickEvent 上调用 setUrlQuery function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.