如何使用字串文字中的onclick將物件傳遞給另一個函式-有解無憂

我有點難倒這個。我想在單擊按鈕時將物件傳遞給另一個函式。這樣我就可以在最終函式中使用物件。

在本例中，我想在單擊“編輯”按鈕時將汽車物件從renderCar函式傳遞到makeEditable函式。

我試過的：
<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>
但不能成功傳遞整個物件。

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

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

HTML

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

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

uj5u.com熱心網友回復：

我認為您可以創建一個檔案片段或僅創建一個元素并將事件偵聽器附加到它。這樣你就可以更靈活地傳遞任何型別的引數。

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

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

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

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>

uj5u.com熱心網友回復：

如果您查看生成的 HTML，問題就會變得非常明顯。在其中，您將擁有'[object Object]'僅僅因為如果您嘗試將物件轉換為字串會發生這種情況，并且很明顯從這一點開始您無法呼叫makeEditable()并期望物件神奇地出現 - 您最終會呼叫'[object 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 makeEditable(data) {
  let car = JSON.parse(decodeURI(data));
  console.log(car);
}

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

編輯：如果走這條路線，上面使用btoa()和atob()（而不是分別地encodeURI(JSON.stringify()和然后JSON.parse(decodeURI(data))）的方法可能會更好，我只是在撰寫本文時沒有想到這一點。

將一些唯一的 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);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/367816.html

標籤：javascript html 目的字符串字面量

上一篇：物件沒有被傳遞給另一個方法（反應）

下一篇：將圖示添加到CSS拉選項卡按鈕的右側