Javascript 如何将不同组件的单击值分配给React中的另一个组件_Javascript_Reactjs_React Hooks

Javascript 如何将不同组件的单击值分配给React中的另一个组件

javascript reactjs

Javascript 如何将不同组件的单击值分配给React中的另一个组件,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我想做的是：当我单击我的按钮，即在Navbar.js中搜索时，我想在变量urlQuery中分配搜索文本，以便我可以将其作为props传递到spicess.js组件中最终目标是以某种方式将urlQuery从Navbar.js传递到Spices.js组件，以便我可以查询RESTAPI 我如何实现期望的行为请帮助 App.js 将urlQuery更改为状态变量。然后，将setUrlQuery作为道具传递给导航栏，在搜索按钮上单击事件调用setUrlQuery函数。将urlQuery更改为状态变量。

我想做的是：

当我单击我的按钮，即在Navbar.js中搜索时，我想在变量urlQuery中分配搜索文本，以便我可以将其作为props传递到spicess.js组件中最终目标是以某种方式将urlQuery从Navbar.js传递到Spices.js组件，以便我可以查询RESTAPI 我如何实现期望的行为请帮助

App.js

将urlQuery更改为状态变量。然后，将setUrlQuery作为道具传递给导航栏，在搜索按钮上单击事件调用setUrlQuery函数。

将urlQuery更改为状态变量。然后，将setUrlQuery作为道具传递给导航栏，并在搜索按钮上单击事件调用setUrlQuery函数。

您的意思是类似于？

App.js

Navbar.js

这里的重要部分是将handleButtonClick函数传递给子组件Navbar。这样，您可以随时调用子组件中的父函数。当用户单击submit按钮时。

App.js

Navbar.js

这里的重要部分是将handleButtonClick函数传递给子组件Navbar。这样，您可以随时调用子组件中的父函数。当用户单击“提交”按钮时。

有一个关于此特定问题的React指南：

通常，您要做的是管理父级中的状态。在本例中，您管理搜索文本状态的应用程序。将函数传递给组件以更改此状态。依赖于此状态的组件通过属性传递值

以下是一个例子：

const{useffect，useState}=React；功能应用程序{ 常量情节URL=https://rickandmortyapi.com/api/episode; const[page，setPage]=useState1； const[pageInfo，setPageInfo]=useState{}； const[searchText，setSearchText]=useState； const[scents，setscents]=useState[]； useEffect=>{ const url=新的url地址； url.searchParams.setpage，第页；如果是searchText url.searchParams.setname，则为searchText；获取URL .thenresponse=>response.json .thenresponse=>{ 如果响应错误{ setPageInfo{}；集集[]； }否则{ setPageInforesponse.info；结果； } }; }，[第页，搜索文本]； const search=searchText=>{ setSearchTextsearchText； setPage1； }; 回来 ; } 函数CustomNavbar{search}{ const[searchText，setSearchText]=useState； const handleFormSubmit=事件=>{ 违约事件；搜索文本； }; 回来 setSearchTextevent.target.value} /> 搜索 ; } 函数集{集}{ 回来插曲名称航空日期 {sections.mapseption=> {插曲，插曲} {集名} {插曲.播放日期} } ; } 函数分页{setPage，info}{ 回来 {info.prev&&setPagepage=>page-1}>previous} {info.next&&setPagepage=>page+1}>next} ; } ReactDOM.render、document.getElementByIdroot； th{文本对齐：左；} {游标：指针；}

有一个关于此特定问题的React指南：

以下是一个例子：

像这样搜索？如果是，它将抛出一个erroronClick={=>props.setUrlQueryevent.target.value}检查此错误或向我显示错误事实上错误与事件有关。首先尝试传递硬编码的值。检查此链接以获取值并将其传递给用于基于类的组件的函数搜索，如下图所示？如果是，它将抛出一个erroronClick={=>props.setUrlQueryevent.target.value}检查此错误或向我显示错误事实上错误与事件有关。首先尝试传递硬编码的值。检查此链接以获取值并将其传递给用于基于类的组件的函数是否有通过URL传递数据的特定原因？直接从子组件到父组件的通信是否适用于您的用例？您能用外行的术语问一下吗？我不明白这个问题如果URL不改变，可以吗？不，它必须改变…哎呀，我误解了这个问题。我指的是浏览器的URL，但这无关紧要。给我一分钟，我将尝试回答这个问题，您通过URL传递数据的具体原因是什么？直接从子组件到父组件的通信是否适用于您的用例？您能用外行的术语问一下吗？我不明白这个问题如果URL不改变，可以吗？不，它必须改变…哎呀，我误解了这个问题。我指的是浏览器的URL，但这无关紧要。给我一分钟，我会尝试回答问题链接只有答案不值得投票。如果这一页掉下去怎么办？如果页面更改怎么办？请从外部页面提取相关代码并添加解释。这应该是注释，而不是注释answer@3limin4t0r这个问题不值得停留太久，所以答案是！仅链接的答案不值得投票。如果这一页掉下去怎么办？如果页面更改怎么办？请从外部页面提取相关代码并添加解释。这应该是注释，而不是注释answer@3limin4t0r这个问题不值得停留太久，所以答案是！此错误React Hook useState在函数customNavbar中调用，该函数既不是React函数组件，也不是自定义React Hook函数。通过大写CustomNavbarAlso将其修复。因此，未定义错误并使其成为事件也会引发错误。输入错误更新了尝试后将行更改为：setSearchValuee.target.value}/>此错误React Hook useState在函数customNavbar中调用，该函数既不是React函数组件，也不是自定义React Hook函数。通过大写CustomNavbarAlso将其修复。因此，未定义错误并使其成为事件也会引发错误。输入错误更新了尝试后将行更改为：setSearchValuee.target.value}/>

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;

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.

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;

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