así que tengo un componente de tabla con un filtro de búsqueda en PressEnter en la primera columna y quiero que mi componente searchBar haga lo mismo básicamente.
Aquí en mi table.js quiero pasar confirm() a Searchbar.js
const columns = [ { key: "1", title: "Title", dataIndex: "title", render: (text) => <a href="/">{text}</a>, sorter: (record1, record2) => record1.title.localeCompare(record2.title), filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => { return ( <Input autoFocus placeholder="Search Column..." value={selectedKeys[0]} onChange={(e) => { setSelectedKeys(e.target.value ? [e.target.value] : []); }} onPressEnter={() => { confirm(); }} onBlur={() => { confirm(); }} ></Input> ); }, filterIcon: () => { return <SearchOutlined />; }, onFilter: (value, record) => { return record.title.toLowerCase().includes(value.toLowerCase()); } },]Aquí está mi Searchbar.js
function Searchbar() { return ( <div> <Form className="d-flex align-items-start"> <Form.Control type="search" placeholder="Enter a keyword or a company name..." /> <Button>Search</Button> </Form> </div> ); } export default Searchbar;También hice un proyecto de codesandbox para visualizar mejor mi problema. Así que tengo un componente de barra de búsqueda principal y quiero que haga lo mismo que el filtro de búsqueda en mi componente de tabla. ¿Es eso posible? Si es así, ¿cuál es la mejor manera de abordar esto? Agradezco cualquier ayuda. ¡Gracias!
Recomendaría un refactor. Mueva sus datos y la lógica de búsqueda hasta un nivel superior y páselos como accesorios a los componentes secundarios, así:
import React, { useState, useEffect } from "react"; import Searchbar from "../components/Searchbar"; import MyTable from "../components/Table"; export default function HomeAfterSearch() { const [data, setData] = useState([]); const [searchText, setSearchText] = useState(""); const [loading, setLoading] = useState(true); const getData = () => { fetch("https://jsonplaceholder.typicode.com/todos") .then((response) => response.json()) .then((data) => { setData(data); }) .catch((err) => { console.log(err); }) .finally(() => { setLoading(false); }); }; useEffect(() => { getData(); }, []); return ( <div className="App"> <Searchbar searchText={searchText} setSearchText={setSearchText} /> <MyTable searchText={searchText} setSearchText={setSearchText} data={data.filter((item) => { if (!searchText) return true; else if ( JSON.stringify(item) .toLowerCase() .includes(searchText.toLowerCase()) ) return true; else return false; })} /> </div> ); } Entonces en MyTable lo declararías así:
function MyTable(props) { const { data, loading } = props; ..... Y SearchBar así:
function Searchbar(props) { const { searchText, setSearchText } = props;Haga su SearchBar como un React.Component , luego puede usar accesorios para pasar datos o funciones desde su componente principal.
import React, {Component} from "react"; import { Form, Button } from "react-bootstrap"; // change the SearchBar to Component class Searchbar extends Component{ constructor(props){ // then you can use props to pass data // or function from its parent component } render(){ return ( <div> <Form className="d-flex align-items-start"> <Form.Control type="search" placeholder="Enter a keyword or a company name..." /> <Button>Search</Button> </Form> </div> ); } } export default Searchbar; function Searchbar(props) { // use props to pass data from parent component return ( <div> <Form className="d-flex align-items-start"> <Form.Control type="search" placeholder="Enter a keyword or a company name..." /> <Button>Search</Button> </Form> </div> ); } export default Searchbar; Puede encontrar más información sobre Custom Component y props en el documento oficial .
Si usa TypeScript, puede definir una interfaz IProps :
interface IProps{ data: number, onConfirm(): void }Cuando use SearchBar, haga lo siguiente:
<SearchBar data = 1, onConform={() =>{ // do something, when calling onConrfim() function }}> </SearchBar>