如何在单击时惯用地将文本组件转换为输入组件？答案

【问题标题】：How do I idiomatically turn a text component into an input component on click?如何在单击时惯用地将文本组件转换为输入组件？
【发布时间】：2019-09-24 17:20:50
【问题描述】：

我正在 React 中创建一个待办事项应用程序，它基本上只是一个按类别分组的项目列表。我想添加功能，以便当我单击一个要执行的操作（这是一个段落）时，它会显示一个包含当前文本的输入，我可以编辑和保存该输入。在不手动编辑 DOM 的情况下如何做到这一点？

代码：单个待办事项：

import React from 'react';

const Item = props => {
  return (
    <div
      className={`item${props.item.purchased ? ' purchased' : ''}`}
      onClick={() => props.toggleItem(props.item.id)}
    >
      <p>{props.item.name}</p>
    </div>
  );
};

export default Item;

我想将切换按钮更改为单选按钮和 onClick 以编辑待办事项。 sample image of todos

【问题讨论】：

请贴出您尝试过的代码。
查看How to Ask 页面以获得澄清此问题的帮助。
我添加了一个待办事项组件。由于我的问题是概念性的，我怀疑我还需要什么？

标签： reactjs

【解决方案1】：

首先，您需要一个更新 item.name 的道具（当您编辑输入时需要）

您没有很好地解释您希望它如何工作，所以我做了一个示例，您可以单击文本将其编辑为文本输入，并且还有一个用于save 编辑的按钮。

const Item = props => {
  const [isEditing, setIsEditing] = useState(false);

  return isEditing ? (
    <div>
      <input
        value={props.item.name}
        onChange={e => props.setItemName(e.target.value)}
      />
      <button onClick={() => setIsEditing(false)}>Stop Editing</button>
    </div>
  ) : (
    <div
      className={`item${props.item.purchased ? " purchased" : ""}`}
      onClick={() => setIsEditing(true)}
    >
      <p>{props.item.name}</p>
    </div>
  );
};

我还创建了一个工作 codesanbox 具有您想要的行为。

【讨论】：

这正是我想要的。谢谢！

【解决方案2】：

您必须保持一个状态才能在TODO Item 和TODO Input 之间切换。由于您使用的是功能组件，因此您可以使用 react 中的useState hook 来维护状态，如下所示

import React, { useState } from 'react';

const Item = props => {
  const [isEditing, setIsEditing] = useState(false);

  if (isEditing) {
    return (
      <div className={`item${props.item.purchased ? ' purchased' : ''}`}>
        <input type="text/radio" value={props.item.name}>
      </div>
    );
  } else {
    return (
      <div
        className={`item${props.item.purchased ? ' purchased' : ''}`}
        onClick={() => props.toggleItem(props.item.id)}
      >
        <p>{props.item.name}</p>
      </div>
    );
  }
};

export default Item;

您可能需要根据您的应用程序结构对上述内容进行一些更改，但这是您需要遵循的。

【讨论】：