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;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句