材质UI隐藏元素onClick或选中复选框时
阿图
我试图在单击按钮或选中复选框时隐藏元素。我尝试使用Google解决方案，但找不到任何东西。有人能帮忙吗？
我想隐藏其中具有Input的第一个MenuItem，单击第二个MenuItem内的Button或选中第三个MenuItem内的Checkbox时需要隐藏它。此外，当再次单击“按钮”或未选中复选框时，它需要恢复正常。
<MenuItem>
<Input />
<MenuItem/>
<MenuItem>
<Button onClick={handleClick}>
Hide onClick!
</Button
</MenuItem
<MenuItem>
<Checkbox />
</MenuItem>
我认为我需要做这样的事情。在handleClick内部，我需要将输入的MenuItems显示设置为none。
const [hide, setHide] = useState(false);
const handleClick = () => {
}
因此，基本上我认为我需要更改元素onClick或选中的样式。我没有什么可展示的，因为我不知道如何做到这一点。
拉吉夫
为此使用条件渲染。
{hide && (
<MenuItem>
<Input />
</MenuItem>
)}
现在，只要hide状态为true，<Input/>就会渲染menuItem；如果为false，它将被隐藏。
变异的hide来自国家CheckBox和Button中，创建一个处理程序，将设置状态。
const toggleHide = () => {
setHide((oldState) => !oldState);
};
现在toggleHide，在Button和的onChange上单击以调用此函数Checkbox。
注意：-为获得更好的结果，可以将onClick侦听器添加到MenuItem而不是Button和中CheckBox。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
选中复选框时，在iframe中隐藏元素
- 2
在复选框上单击/选中隐藏元素，在复选框未选中时重新插入元素
- 3
单击复选框时隐藏元素
- 4
如何根据选中的复选框数量显示/隐藏元素？
- 5
选中复选框时显示/隐藏面板
- 6
选中复选框时显示/隐藏div
- 7
未选中复选框时隐藏div
- 8
选中复选框时隐藏/显示行
- 9
未选中复选框时隐藏输入
- 10
选中复选框时隐藏复选框，否则保持可见
- 11
如果复选框已选中，则隐藏复选框
- 12
选中复选框时更改列表元素的颜色
- 13
发布表单时如何获取复选框元素中未选中复选框的值？
- 14
在复选框中选中复选框时显示元素
- 15
在选中复选框之前隐藏 div
- 16
材质UI禁用复选框悬停
- 17
复选框未选中onclick JavaScript
- 18
选中/取消选中复选框以使用 javascript 显示/隐藏输入文件元素
- 19
选中复选框时更改复选框颜色？
- 20
选中复选框时移动复选框标签
- 21
选中复选框时更改复选框颜色？
- 22
未选中子复选框时如何选中复选框主复选框？
- 23
在选中和取消选中复选框时显示和隐藏div
- 24
jQuery隐藏复选框选中，但不取消选中
- 25
在选中复选框时显示数据
- 26
选中复选框时启用按钮
- 27
选中复选框时更新变量
- 28
选中复选框时的jQuery事件
- 29
选中复选框时显示按钮
我来说两句