javascript - 有没有办法将输入占位符设置为反应中的道具?
问题描述
当我路由到不同的页面时,我打算为输入占位符设置不同的值。是否可以将属性设置为道具?
下面是我的搜索模块或组件的代码,其中存在我想用作道具的占位符。
export default function Search(props) {
return (
<div className={styles.container}>
<FontAwesomeIcon icon={faSearch} />
<input type="text" placeholder={props.search} />
</div>
);
}
此 Search 组件在 App.js 中呈现之前在另一个组件中使用。
export default function Page({ data, setModalVisibleState, }) {
const addButtonHandler = () => {
setModalVisibleState(true);
};
return (
<div className={styles.container}>
<div className={styles.titleBox}>
<FontAwesomeIcon icon={faGraduationCap} />
<p>{data.title}</p>
<Button size="normal" shape="squared" color="blue" onClick={addButtonHandler}>{data.button}</Button>
</div>
<div className={styles.menuBox}>
<ul>
{data.menu.map((v, i) => (
<li key={i}>
<BodaSelect name={v} />
</li>
))}
</ul>
<Search search={search} />
</div>
...
最后,这是我想在路由每个页面时设置占位符值的 App.js。
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
const [modalVisibleState, setModalVisibleState] = useState(false);
return (
<div className="App">
<Router>
<Sidebar />
{modalVisibleState ? (
<Modal setModalVisibleState={setModalVisibleState} />
) : (
""
)}
<Switch>
<Route path="/assignment">
<Page
search="search assignments"
data={{
menu: ["class A"],
title: "assignment",
button: "Add a new assignment",
table: ["Date", "Textbook", "Content"],
tableData: [
["2021/03/31",
"English 101",
"Assignment guideline",
],
["2021/03/28",
"Maths 101",
"Assignment details",
],
],
}}
setModalVisibleState={setModalVisibleState}
/>
</Route>
<Route path="/">
<Page
search="search students"
data={{
menu: ["All schools", "All grades", "All classes", "All homeroom teachers"],
title: "student",
button: "Add a new student",
table: ["Students", "Grades", "Schools", "Homeroom teachers", "Classes"],
tableData: [
[
"Lisa Parker",
"12",
"Orange High School",
"Kate Lee",
"Orange Juice Class · Orange Farming Class · Mango Class",
],
],
}}
setModalVisibleState={setModalVisibleState}
/>
</Route>
</Switch>
</Router>
</div>
);
}
如果无法将占位符设置为道具,是否有办法设置占位符值变量?
谢谢您的帮助。
解决方案
是的。可以将占位符设置为道具。你做的一切都很好。但是我看到您没有在 Page 组件中声明 props `search。你需要添加这个道具:
export default function Page({ data, setModalVisibleState, search}) {...
推荐阅读
- visual-studio-code - Prevent default "close editor" behavior of going to previously opened editor
- php - ajax回调后增量计数器不起作用
- python - 在 pandas read_excel 中指定 index_col 时忽略 dtype 参数
- javascript - NodeJS 和 Mysql 连接配置被忽略
- python-3.x - 循环将熊猫数据帧的特定行中的字符串写入 PDF
- html - 如何在左右突出一个div
- python - 如果两个列表包含的表面 pygame 对象相等,我该如何检查?
- amazon-web-services - 如何从 terraform 创建 ansible 库存?
- c# - 我怎样才能让火箭围绕它的底部旋转,并统一到中间?
- python - 使用生成器为数据帧创建掩码函数