如何将值onClick从不同组件分配给React中的另一个组件

Phil 发表于 Dev

菲尔

我想做的事：

当我点击我的按钮，即Search在Navbar.js我想要分配变量中的搜索文本urlQuery，所以我可以把它当作道具Episodes.js组件
最终目标是将urlQuery从Navbar.js某种方式传递给Episodes.js组件，以便我可以查询REST API

我如何实现所需的行为

App.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;

Navbar.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

编辑

根据佐伊布的建议，抛出此错误

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.

拉迪胡克

App.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;

Navbar.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函数传递给子组件（导航栏）。这样，您可以随时在子组件中调用该父函数（即，当用户单击“提交”按钮时）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。