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

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>
        ))}

标签： reactjsbuttonreact-hooks

Answer 1

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

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>
);