[英]How to pass props to another component in React?
所以我在第一列中有一個帶有搜索過濾器 onPressEnter 的表格組件,我希望我的 searchBar 組件基本上做同樣的事情。
在我的 table.js 中,我想將confirm()
傳遞給 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());
}
},]
這是我的 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;
我還制作了一個 codeandbox項目來更好地可視化我的問題。 所以我有一個主要的搜索欄組件,我希望它與我的表格組件中的搜索過濾器做同樣的事情。 那可能嗎? 如果是這樣,解決這個問題的最佳方法是什么? 我很感激任何幫助。 謝謝!
將您的SearchBar
設為React.Component
,然后您可以使用 props 從其父組件傳遞數據或函數。
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;
您可以在官方文檔中找到更多關於Custom Component
和props
信息。
如果你使用 TypeScript,你可以定義一個IProps
接口:
interface IProps{
data: number,
onConfirm(): void
}
使用 SearchBar 時,請執行以下操作:
<SearchBar
data = 1,
onConform={() =>{
// do something, when calling onConrfim() function
}}>
</SearchBar>
我會推薦重構。 將您的數據和搜索邏輯向上移動到父組件,並作為道具傳遞給子組件,如下所示:
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>
);
}
那么在MyTable
你可以這樣聲明:
function MyTable(props) {
const { data, loading } = props;
.....
和SearchBar
像這樣:
function Searchbar(props) {
const { searchText, setSearchText } = props;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.