鼠标单击图像时更改元素

昆丹

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章