时间戳

首页 > 解决方案 > 我希望我的 h4、h2 和 p 标签在我单击它们时更改输入

reactjs - 我希望我的 h4、h2 和 p 标签在我单击它们时更改输入

问题描述

我的组件代码

我希望我的 h4、h2 和 p 标签在我单击它们时更改输入

我怎样才能简单地用 reactjs 做到这一点？

    export default function requestCard(props) {
  return (
    <div className="Card">
      <div className="Card-Top">
        <div className="Top-Left">
          <IoIosRadioButtonOn />
          <h4>{props.data.Status}</h4>
        </div>
        <div className="Top-Right">
          <h4>{props.data.Date}</h4>
        </div>
      </div>
      <div className="Card-Middle">
        <h2>{props.data.CutStyle}</h2>
        <p>{props.data.client}</p>
      </div>
      <div className="Card-Bottom">
        <img src={props.data.Picture} alt="new photos" />
        <h2>{props.data.name}</h2>
      </div>
    </div>
  );
}

标签： reactjs

解决方案

您可以按以下方式进行（例如状态）

const [statusEdit, setStatusEdit] = useState(false);
const [status, setStatus] = useState(props.data.Status);

然后在返回部分写如下：

 <div className="Top-Left">
    <IoIosRadioButtonOn />
    {
       statusEdit ? 
            <input value={status} onChange={(e)=>{setStatus(e.target.value)}}  onKeyDown={(e) => {if(e.keyCode  === 13) setStatusEdit(false)}} />:
            <h4 onClick={() => setStatusEdit(true)} >{status}</h4>
    }
 </div>

推荐阅读