Question

我正在React中创建一个todo应用，该应用基本上只是一个项目列表，按类别分组。我想添加一些功能，这样当我单击一个要执行的操作（这是一个段落）时，它将显示一个带有当前文本的输入，我可以编辑和保存该文本。不手动编辑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

Answer 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。

Answer 2

您将必须保持状态以在TODO Item和TODO Input之间切换。由于您使用的是功能组件，因此可以使用react的useState钩子来保持状态，如下所示

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;

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

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

2 个答案: