如何在字符串文字中使用 onclick 將 object 傳遞給另一個 function

Question

我有點難倒這個。 當我單擊一個按鈕時，我想將一個 object 傳遞給另一個 function。 這樣我就可以在最終的 function 中使用 object。

在這個例子中，當我點擊編輯按鈕時，我想將汽車object 從renderCar function 傳遞給makeEditable function。

我嘗試了什么：
<button onclick="makeEditable(${car})">Edit</button>
<button onclick="makeEditable(car)">Edit</button>
<button onclick="makeEditable('${car}')">Edit</button>

我可以傳入一個字符串
<button onclick="makeEditable('${car.type}')">Edit</button>
但沒有成功通過整個 object。

在這里，我寫了一個我想要做的例子。

小提琴： https://jsfiddle.net/kyleteeter/v8gs05e1/10/

HTML

<div id="root" ></div>

JS

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "capacity": 5
  }
]

cars.map(car => {
    this.root.innerHTML += this.renderCar(car)
    });
    

function renderCar(car) {
    return `<div><div data-type="color">${car.color}</div><div data-type="type">${car.type}</div><div data-type="capacity">${car.capacity}</div><button onclick="makeEditable('${car}')">Edit</button></div>`
}

function makeEditable(car){
  console.log(car)
} 

Answer 1

如果您查看生成的 HTML，問題就會變得非常明顯。 在其中，您將擁有'[object Object]' ，因為如果您嘗試將 object 轉換為字符串，就會發生這種情況，很明顯，從這一點開始您不能調用makeEditable()並期望 object神奇地出現 - 你最終以'[object Object]'作為參數調用 function，而且，這不是你正在尋找的 object。

我看到了兩種可能的方法：

1. 嘗試將整個 object 推入 HTML 中，如下所示：

function renderCar(car) {
  return `<div><div data-type="color">${car.color}</div><div data-type="type">${car.type}</div><div data-type="capacity">${car.capacity}</div><button onclick="makeEditable('${encodeURI(JSON.stringify(car))}')">Edit</button></div>`;
}

...然后，要正確檢索它，您必須在makeEditable() function 中反轉該過程：

function makeEditable(data) {
  let car = JSON.parse(decodeURI(data));
  console.log(car);
}

...但這有點丑陋，可能並不總是有效。

2. 將一些唯一 ID 與數據一起存儲並僅將其傳遞到 HTML，然后使用它對數組進行查找：

let cars = [
  {
    color: "purple",
    type: "minivan",
    capacity: 7,
    id: "2a93d4e1-9ee9-4490-b4a8-da836cf81d7f",
  },
  {
    color: "red",
    type: "station wagon",
    capacity: 5,
    id: "aa207e90-08d1-434f-afeb-aed1dbd1dab9",
  }
];

cars.map((car) => {
  this.root.innerHTML += this.renderCar(car);
});

function renderCar(car) {
  return `<div><div data-type="color">${car.color}</div><div data-type="type">${car.type}</div><div data-type="capacity">${car.capacity}</div><button onclick="makeEditable('${car.id}')">Edit</button></div>`;
}

function findById(id, array) {
  return array.find((e) => e.id === id);
}

function makeEditable(id) {
  let car = findById(id, cars);
  console.log(car);
}

Answer 2

我認為您可以創建一個文檔片段或僅創建一個元素並將事件偵聽器附加到它。 這樣，您將更靈活地傳遞任何類型的參數。

但是，如果您真的想讓它按照您嘗試過的方式工作，請考慮下面的示例。

我會說它的實施是矯枉過正，但它的工作原理。

基本上，以這種方式傳遞的任何參數都將轉換為字符串（因為它是用引號括起來的）。 要利用它，您可以對 object 進行字符串化並將其編碼為 base64（以將其保留為字符串），並在目標 function 中以相同的方式對其進行解碼和解析。

 const cars = [ { color: 'purple', type: 'minivan', capacity: 7, }, { color: 'red', type: 'station wagon', capacity: 5, }, ]; cars.forEach((car) => { this.root.innerHTML += renderCar(car); }); function makeEditable(car) { const parsed = JSON.parse(atob(car)); console.log(parsed); } function renderCar(car) { const stringified = btoa(JSON.stringify(car)); return ` <div> <div data-type='color'>${car.color}</div> <div data-type='type'>${car.type}</div> <div data-type='capacity'>${car.capacity}</div> <button onclick="makeEditable('${stringified}')">Edit</button> </div> `; }

 <div id="root"></div>