javascript - 鼠标单击图像时更改元素
问题描述
className="details"
当用户单击className="edit-icon"
同一网格容器中的图像时,我想将段落元素更改为输入字段(可编辑)。我怎么能那样做?
import React from 'react';
import Grid from '@material-ui/core/Grid';
const Settings = () => {
return (
<div>
<Grid container>
<Grid item xs={4}>
<p className="details-label">NAME</p>
</Grid>
<Grid item xs={4}>
<p className="details">Lorem Ipsum</p>
</Grid>
<Grid item xs={4}>
<img className="edit-icon" src="icon_edit.png"/>
</Grid>
</Grid>
<Grid container>
<Grid item xs={4}>
<p className="details-label">Phone</p>
</Grid>
<Grid item xs={4}>
<p className="details">+123456789</p>
</Grid>
<Grid item xs={4}>
<img className="edit-icon" src="icon_edit.png"/>
</Grid>
</Grid>
</div>
);
};
export default Settings;
解决方案
这是一个解决方案:如果您希望每个容器在单击时都可以独立编辑,我会将代码分成多个组件:
import React, { useState } from 'react';
import Grid from '@material-ui/core/Grid';
const Container = ({ attr, val }) => {
const [isEditable, setIsEditable] = useState(false)
return (
<Grid container>
<Grid item xs={4}>
<p className="details-label">{attr}</p>
</Grid>
<Grid item xs={4}>
{isEditable ? <input type="text" defaultValue={val} /> : <p className="details">{val}</p>}
</Grid>
<Grid item xs={4}>
<img onClick={() => setIsEditable(!isEditable)} className="edit-icon"
src="icon_edit.png"/>
</Grid>
</Grid>
)
}
const Settings = (props) => {
return (
<div>
<p>Settings</p>
<Container attr="NAME" val="John Doe" />
<Container attr="Phone" val="+123456789"/>
</div>
);
};
export default Settings;
推荐阅读
- pandas - 根据另一个数据帧的条件计算一个数据帧的描述性统计数据(在行和列上运行)
- react-native - 如何给由函数组件组成的 HOC 提供参考
- php - 使用列颜色的 if 条件将数据导出到 Excel
- javascript - 如何选择表格?
- docker - 带有 certbot 和第三个应用程序(url = example.org)的 nginx - 不重定向?
- javascript - 使用 jQuery 打开可折叠侧边栏选项
- javascript - gsap动画的反向播放
- reactjs - 网络摄像头无法用于生产,未显示许可弹出窗口
- angular - Angular - 下拉验证 - 在 mouseup 事件之前显示验证
- visual-studio-code - 使用多个容器设置 Visual Studio Code