Javascript Next.js：当每个标记检查其isEdit状态是否为true或false时，如何仅使一个输入字段内联可编辑

我有一些标签显示文本，它们通过检查

编辑

状态是

true

还是

false

有条件地呈现

标签。当

true

时，我不显示文本，而是呈现

标记以进行内联编辑

一切正常。唯一的问题是，当一个

标记将

编辑

状态更改为true时，每个标记都会呈现其输入字段，而不是在单击编辑的位置显示要编辑的输入字段

如何限制仅对那些通过单击编辑按钮更改了

编辑

状态的标签呈现输入字段

我的代码：

const [ edit, setEdit ] = useState(false);
const isEdit = edit;

<div>
    <p>{ !isEdit ? (<span>Email: {userProfile.email} <button onClick={e=>setEdit(!edit)}>Edit</button></span>) : (<span>Email: 
    <input type="text" placeholder="email"
          name="email"  onChange={e=>setEmail(e.target.value)}/>
    <button type="submit" onClick={addUserEmail}>Save</button></span>
     )}
</p>
<p>About: { !isEdit ? (<span> {userProfile.about} <button onClick={e=>setEdit(!edit)}>Edit</button>        
     </span>) :
    (<span>
           <input type="text" placeholder="about"
                 name="about"  onChange={e=>setAbout(e.target.value)}
           />
            <button type="submit" onClick={addUserAbout}>Save</button>
     </span>)                            
    )}
</p>
</div>

const[edit，setEdit]=useState（false）；
const isEdit=编辑；
{！isEdit？（电子邮件：{userProfile.Email}setEdit（！edit）}>edit）：（电子邮件：
setEmail（e.target.value）}/>
拯救
)}

关于：{！isEdit？（{userProfile.About}setEdit（！edit）}>edit
) :
(
setAbout（e.target.value）}
/>
拯救
)                            
)}

有两种解决方案，但最干净的方法可能是将这些可编辑字段分离到它们自己的组件中，因为每个字段都有自己的状态

例如，您可以创建一个与此类似的通用EditableField组件：

function-EditableComponent（{defaultIsEditing=false，renderText，renderInput}）{
const[isEditing，setIsEditing]=useState（defaultIsEditing）；
如果（！i编辑）{
//非编辑模式
返回（{renderText（）}setEdit（！edit）}>edit）；
}
//编辑模式
返回renderInput（）；
}

然后按如下方式使用：

电子邮件：{userProfile.Email}
renderInput={（）=>（电子邮件：
setEmail（e.target.value）}/>
拯救
)}
/>
{/*…对所有字段重复*/}

此解决方案确保您不会反复重复相同的逻辑。对于两个字段，只需创建两个状态变量（例如isEdit1、isEdit2）就可以了，但添加的字段越多，它就会变得越麻烦

---

另一种选择是将正在编辑的输入的名称存储为状态，这将确保一次只编辑一个字段，但是在开始编辑新字段时，您需要注意保存旧字段

两种不同的编辑状态不起作用？为什么

renderText

和

renderInput

是可调用的？在这种情况下，没有理由，您也可以将它们设置为非函数