如何在 React 中仅针对 UI 呈现列表中的单个项目答案

【问题标题】：How to only target a single item in a UI rendered list in React如何在 React 中仅针对 UI 呈现列表中的单个项目
【发布时间】：2021-09-19 04:48:07
【问题描述】：

我正在构建一个简单的 todo-esk 功能，如果用户单击编辑图标，则只有该项目是可编辑的。我目前使用 useState 钩子 const [editingMemberName, setEditingMemberName] = useState(false) 来实现这一点，但是当我调用函数时，editMemberName 的所有项目实例都显示一个输入字段。这不是我想要的体验。

以下是一些屏幕截图，可以更清楚地说明这一点：

如你所见，我有两张卡片，但是当我点击工具图标时，两个输入框都会显示出来。

代码如下：

const [editingMemberName, setEditingMemberName] = useState(false)
const [memberName, setMemberName] = useState('')

const handleChangeName = (e) => {
    setMemberName(e.target.value)
  }
// Update member name
const editMemberName = async (e) => {
    setEditingMemberName(true)
  }


const memberItems = members.map((member) => {
  return (
  <div
        key={member.id}
      >
        <div className="flex items-center gap-4 w-full">
          {editingMemberName ? (
            <input
              type="text"
              placeholder="Johnny Appleseed"
              onChange={handleChangeName}
            />
          ) : (
            <>
              <div>
                {member.name}
              </div>
              <h3>{member.name}</h3>
            </>
          )}
        </div>
        <div>
          {editingMemberName ? (
            <button
              onClick={() => updateMemberName(member.id)}
            >
              <CgCheckO size=".75em" />
            </button>
          ) : (
            <button
              onClick={() => editMemberName(member.id)}
            >
              <FiTool size=".75em" />
            </button>
          )}
        </div>
      </div>
)

我已经意识到 editorMemberName 挂钩对所有实例都有效，但我不确定如何仅针对单个项目。

注意：您可以假设 members 数组对每个项目都有一个唯一的 id。

members: [
 {
   name: "Johnny",
   id: 123
 },
{
   name: "George",
   id: 456
 }
]

【问题讨论】：

标签： javascript reactjs use-state

【解决方案1】：

这是因为您将布尔值引用到所有框而不是单个元素，请使用

const [editingMemberName, setEditingMemberName] = useState(members.map(e => false))

有点意思

const editMemberName = async (memberID, index) => {
let new_editing_members_state = members.map(e => false)
new_editing_members_state[index] = true
    setEditingMemberName(new_editing_members_state)
}

const memberItems = members.map((member, index) => {
  return (
  <div
        key={member.id}
      >
        <div className="flex items-center gap-4 w-full">
          {editingMemberName ? (
            <input
              type="text"
              placeholder="Johnny Appleseed"
              onChange={handleChangeName}
            />
          ) : (
            <>
              <div>
                {member.name}
              </div>
              <h3>{member.name}</h3>
            </>
          )}
        </div>
        <div>
          {editingMemberName[index] ? (
            <button
              onClick={() => updateMemberName(member.id)}
            >
              <CgCheckO size=".75em" />
            </button>
          ) : (
            <button
              onClick={() => editMemberName(member.id,index)}
            >
              <FiTool size=".75em" />
            </button>
          )}
        </div>
      </div>
)

【讨论】：