Reactjs 如何访问React useState中元素的名称
我正在尝试设置一个组件，其中列出了一组标题。每个标题旁边都有一个“+”，当您单击“+”时，另一个组件将显示包含更多信息的组件。我知道如何做到这一点，以便一次只能显示一个组件，但我希望这样做，以便可以同时查看多个组件 这是到目前为止我的代码Reactjs 如何访问React useState中元素的名称,reactjs,react-hooks,use-state,Reactjs,React Hooks,Use State,我正在尝试设置一个组件，其中列出了一组标题。每个标题旁边都有一个“+”，当您单击“+”时，另一个组件将显示包含更多信息的组件。我知道如何做到这一点，以便一次只能显示一个组件，但我希望这样做，以便可以同时查看多个组件 这是到目前为止我的代码 import React, { useState, useEffect } from "react"; import MattressUpgrade from "./CamperMods/MattressUpgrade"
import React, { useState, useEffect } from "react";
import MattressUpgrade from "./CamperMods/MattressUpgrade";
const CamperModsContainer = () => {
const [iconType, setIconType] = useState({
mattressUpgrade: "",
});
const [show, setShow] = useState({
mattressUpgrade: false,
});
useEffect(() => {
setIconType({
mattressUpgrade: "fas fa-plus-square",
});
setShow({
mattressUpgrade: false,
});
}, []);
let onClickHandler = (event) => {
event.preventDefault();
let payload = event.currentTarget;
toggleShow(payload);
};
const toggleShow = (payload) => {
debugger;
if (payload.value === true) {
setIconType.payload.id("fas fa-minus-square");
setShow.payload.id(true);
} else if (payload.value === false) {
setIconType.payload.id("fas fa-plus-square");
setShow.payload.id(false);
}
};
return (
<div>
<h1>Camper Modifications</h1>
<p>
As much as we love the Wolf Pup (aka the 'Gray Ghost'), there
are some things that we tweaked...
</p>
<div className="flex-row">
<h3>Mattress Upgrade</h3>
<button
type="button"
id={show.mattressUpgrade.key}
value={show.mattressUpgrade}
className={iconType.mattressUpgrade}
onClick={onClickHandler}
></button>
</div>
{show === true && <MattressUpgrade />}
</div>
);
};
export default CamperModsContainer;
import React，{useState，useffect}来自“React”；
从“/CamperMods/MattressUpgrade”导入MattressUpgrade；
常数CamperModsContainer=（）=>{
常量[iconType，setIconType]=useState({
床垫，
});
const[show，setShow]=useState({
mattressUpgrade:错误，
});
useffect（（）=>{
setIconType({
床垫升级：“fas fa plus square”，
});
布景({
mattressUpgrade:错误，
});
}, []);
让onClickHandler=（事件）=>{
event.preventDefault（）；
让有效负载=event.currentTarget；
切换显示（有效载荷）；
};
常量切换显示=（有效负载）=>{
调试器；
如果（payload.value==true）{
setIconType.payload.id（“fas fa减平方”）；
setShow.payload.id（true）；
}else if（payload.value==false）{
setIconType.payload.id（“fas fa plus square”）；
设置show.payload.id（false）；
}
};
返回(
露营车改装
就像我们爱狼崽（又名灰鬼）一样，我们也爱它
是我们调整过的一些东西。。。
床垫升级
{show==true&&}
);
};
导出默认的CamperModsContainer；
问题是将id设置为
id={show.mattressUpgrade.key}开关showpayload.valuefalseshow.mattressUpgrade.keyshow.mattressUpgradeshow.mattressUpgradefalsefalseundefinedundefinedide.target.idconst示例=（）=>{
常数测试=假；
console.log（'test.property'，test.property）；
常数handleChange=（e）=>{
console.log（e.target.id）
}
返回
}
ReactDOM.render（，document.getElementById（'root'））
我相信您正在寻找计算属性，但这里还有几个值得强调的误解
一般的建议是尽可能保持数据类型的一致性。在字符串和布尔值之间转换很难理解和调试。如果最终在更复杂的数据类型（对象等）之间切换，则很容易出错
第一个问题是，show.mattressUpgrade.key
不起作用，而且永远不会起作用<代码>键show.mattressUpgradeshow.mattressUpgradefalsefalseundefinedundefinedide.target.idconst示例=（）=>{
常数测试=假；
console.log（'test.property'，test.property）；
常数handleChange=（e）=>{
console.log（e.target.id）
}
返回
}
ReactDOM.render（，document.getElementById（'root'））
为什么按钮需要id
？另外，您希望show.mattressUpgrade.keysetIconType.payload.iduseStateMattressupGradeusebattshowidsetIconType.payload.iduseStateMattressupGradeUseBattshow