从其他组件React点击按钮后显示数据

Question

嗨，我正在为域查找服务制作一个搜索引擎，我想接受用户输入，并将其显示在搜索栏下方，作为屏幕的一部分，显示是否可以购买。

这是我的App.js文件

function MyApp({ Component, pageProps,   
navigation }) {
const [searchTerm, setSearchTerm] = 
useState("");

return (
<Web3ReactProvider getLibrary={getLibrary}>
<div className='App'>
<h2 className='h2'>Theta Name Services</h2>

</div>
<div>
<div className='searchCont'>
<TextField
fullWidth
id="standard-bare"
variant="outlined"
label="Search for Domains..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
InputProps={{
endAdornment: (
<IconButton onClick={(props) => {<Search name={props.name}></Search>} }>
<SearchOutlined />
</IconButton>
),
}}      
/>
</div>

<div >
<h1>{searchTerm}</h1>
</div>
</div>


export default MyApp

这是我的SearchPage.js组件

function searchResults(props) {
var  style1 = {color: 'blue'};
var style2 = {marginLeft: '100px'};
const [searchTerm, setSearchTerm] = useState("");
const [domains, setDomains] = useState([]);
console.log(props.name)
return(
<h1>{props.name}</h1>
)

}
const searchDomains = async (domainName) => {
const response = await fetch(`${API_URL}&s=${domainName}`);
const data = await response.json();
//setDomains(data.Search);
return(
<div style={{margin: 100, backgroundColor:"skyblue"}}>
<h1>Hello World</h1>
</div>
)
}
export default searchResults

基本上，我所要做的就是静态显示用户输入的域。它被设置为值"0"；searchTerm"；但每当我做这段代码

<IconButton onClick={() => {<Search name={searchTerm}></Search>} }>

它从不在Click上显示任何内容，但我可以让它实时显示正在键入的内容，而不是搜索到的内容。

任何帮助都将不胜感激，谢谢！会发布图片，但没有足够的代表

Answer 1

如果我对您的实现没有错，那么您希望在单击图标按钮时显示搜索组件。因此，只要单击iconButton，就可以有一个状态来呈现搜索组件。

您修改的App.js文件：

import Search from "./SearchTerm.js"; // Assuming your component name
import { useState } from "react";
function MyApp() {
const [showSearchTerm, setShowSearchTerm] = useState(false);
return (
<>
<Web3ReactProvider getLibrary={getLibrary}>
<div className="App">
<h2 className="h2">Theta Name Services</h2>
<div className="searchCont">
<TextField
fullWidth
id="standard-bare"
variant="outlined"
label="Search for Domains..."
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
InputProps={{
endAdornment: (
<IconButton
onClick={() => {
setShowSearchTerm(true);
}}
>
<SearchOutlined />
</IconButton>
),
}}
/>
</div>
<div>
<h1>{searchTerm}</h1>
</div>
</div>
</Web3ReactProvider>
{showSearchTerm && <Search name={searchTerm} />}
</>
);
}
export default MyApp;

我们在这里试图做的是根据您单击搜索组件的时间有条件地呈现该组件，并且我们直接从您提供的输入中获取状态。

更新：对于搜索词需要为静态的场景，可以将displaySearchTerm状态设置为字符串，并显示所显示的搜索词。

import Search from "./SearchTerm.js"; // Assuming your component name
import { useState } from "react";
function MyApp() {
const [displaySearchTerm, setDisplaySearchTerm] = useState("");
return (
<>
<Web3ReactProvider getLibrary={getLibrary}>
<div className="App">
<h2 className="h2">Theta Name Services</h2>
<div className="searchCont">
<TextField
fullWidth
id="standard-bare"
variant="outlined"
label="Search for Domains..."
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
InputProps={{
endAdornment: (
<IconButton
onClick={() => {
setDisplaySearchTerm(searchTerm);
}}
>
<SearchOutlined />
</IconButton>
),
}}
/>
</div>
<div>
<h1>{searchTerm}</h1>
</div>
</div>
</Web3ReactProvider>
{displaySearchTerm && <Search name={displaySearchTerm} />}
</>
);
}
export default MyApp;

在这种情况下，每次单击按钮时，显示搜索词字符串状态都会更新。SearchTerm组件根据更新后的状态显示内容。