编辑按钮应该只能应用于列表中的一项

Question

我有一个包含多个对象的列表。每个对象都有自己的按钮。一个是编辑按钮，一个是保存按钮。

如果我点击编辑按钮，应该不再显示按钮，应该显示保存按钮。我已经实现了这个逻辑。问题是当我点击“编辑”按钮时，它遍历了整个列表并且所有按钮都被更改了。

但是，当我单击一个按钮时，我只想更改该元素的按钮而不是整个列表的按钮。我怎样才能让它一次只应用于一个元素？

const [editing, setEditing] = useState(false);
const editingTraining  = (id) => {
    console.log("Editing works")
    setEditing(!editing);
}
     {trainingData.map((d, i) => (
            <div key={i}>                
                {
                    editing === false && <button className="button is-info" onClick={() => editingTraining(d.trainingsid)}>Edit</button>
                }
                {
                    editing === true && <button className="button is-success" onClick={() => editingTraining(d.trainingsid)}>Save</button>
                }
                <br />
            </div>
        ))}

Answer 1

您应该存储正在编辑的条目。例如，通过使用 trainingsid 属性 liko so:

const [editing, setEditing] = useState(null);

const editingTraining = (id) => {
  setEditing(id);
};

return (
  <div>
    {trainingData.map((d, i) => (
      <div key={i}>
        {editing === d.traningsid ? (
          <button className="button is-success" onClick={() => editingTraining(null)}>Save</button>
        ) : (
          <button className="button is-info" onClick={() => editingTraining(d.trainingsid)}>Edit</button>
        )}
        <br />
      </div>
    ))}
  </div>
);

Answer 2

The problem is that when I click on the Edit button, it iterates through the entire list and all the buttons are changed.

实际情况并非如此。在您的组件中，您只有一个要切换的编辑布尔值。他们都使用相同的标志进行条件渲染。

为了 show/not 显示每个按钮，您可以将按钮提取到一个单独的组件中，该组件具有自己的编辑状态。

示例：

const ActionButton = (props) => {
    const [editing,setEditing] = useState(false)
    
    const yourFunction = () => …

    return (
        <>
        {editing === false ? (
            <button className="button is-info" onClick={() => yourFunction()}>Edit</button>
        ) : (
            <button className="button is-info" onClick={() => yourFunction()}>Save</button>
        )}
        </>
    )
}

然后在您的主要组件的地图函数中渲染它 + 添加必要的 props/functions 到您的 ActionButton 组件。

编辑按钮应该只能应用于列表中的一项

Edit button should only be able to be applied to one item in the list

button

reactjs

react-hooks