Next.js：当每个标签检查其 isEdit 状态是真还是假时，如何使只有一个输入字段可内联编辑

Posted 2023-02-22

【中文标题】Next.js：当每个标签检查其 isEdit 状态是真还是假时，如何使只有一个输入字段可内联编辑

【英文标题】：Next.js: How to make only one input field inline editable when every tag checks whether its isEdit state is true or false

【发布时间】：2021-07-03 14:29:33

【问题描述】：

我有一些显示文本的标签，它们通过检查edit 状态是true 还是false 有条件地呈现<input /> 标签。当true 时，我不显示文本，而是渲染一个<input /> 标记以进行内联编辑。

一切正常。唯一的问题是，当一个<button> 标记将edit 状态更改为true 时，每个标记都不会在单击Edit 的位置显示用于编辑的输入字段，而是呈现它们的输入字段。

如何将输入字段的这种呈现限制为仅针对那些通过单击 编辑 按钮更改了 edit 状态的标签？

我的代码：

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>

【问题讨论】：

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

【参考方案1】：

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

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

    function EditableComponent(defaultIsEditing = false, renderText, renderInput) 
       const [ isEditing, setIsEditing ] = useState(defaultIsEditing);

       if(!isEditing)
          //Non-edit mode
          return (<span> renderText() <button onClick=e=>setEdit(!edit)>Edit</button></span>);
       

       //Edit mode
       return renderInput();
    

然后这样使用它：

<div>
      <EditableComponent
         renderText=() => <>Email: userProfile.email</>
         renderInput=() => (<span>Email: 
                              <input type="text" placeholder="email" name="email"  onChange=e=>setEmail(e.target.value)/>
                               <button type="submit" onClick=addUserEmail>Save</button>
                             </span>)
      />

     /* ...repeat for all fields */
</div>

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

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

【讨论】：

为什么 renderText 和 renderInput 是可调用的？

在这种特殊情况下没有理由，您也可以将它们设为非功能