如何将 javascript 代码作为表单输入并附加到 DOM 元素的事件监听器代码

Question

我正在尝试开发一个项目，允许用户创建 HTML 元素并向其附加适当的事件侦听器代码（https://codesandbox.io/s/interactive-objects-tjvvhv?file=/src/应用程序.js）

在下面的代码中，我想读取包含三个字段的 formData，1）元素类型、2）事件监听器类型和 3）将进入事件监听器的 JS 代码。 我知道我可以使用 createElement 并附加到 DOM，但我不确定如何从 DOM 元素的表单添加事件侦听器代码。

import "./styles.css";

export default function App() {
  function handleFormSubmit(e) {
    e.preventDefault();
    console.log(e);
    //create the a new element with the event listener code and append it div#display
  }
  return (
    <div className="App">
      <form onSubmit={handleFormSubmit}>
        <label for="element-type">element-type</label>
        <input type="text" name="element-type" />
        <br />
        <label for="event-listener">event-listener</label>
        <input type="text" name="event-listener" />
        <br />
        <label for="code">code</label>
        <textarea name="code" rows="7" cols="50" />
        <br />
        <input type="submit" />
      </form>
      <div id="display"></div>
    </div>
  );
}

任何这方面的想法都值得赞赏。非常感谢。

Answer 1

这是安全使用

iframe

的版本：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [srcDoc, setSrcDoc] = useState("");

  function handleFormSubmit(e) {
    e.preventDefault();

    const form = new FormData(e.target);

    console.log(form);
    const type = form.get("element-type");
    const content = form.get("element-inner");
    const eventName = form.get("event-listener");
    const eventCode = form.get("code");

    setSrcDoc(`
    <script>
    const element = document.createElement("${type}")
    element.innerHTML = "${content}"
    element.addEventListener("${eventName}", (event) => {
      ${eventCode}
    })
    document.documentElement.appendChild(element)
    </script>
    `);
  }
  return (
    <div className="App">
      <form onSubmit={handleFormSubmit}>
        <label for="element-type">element-type</label>
        <input type="text" name="element-type" />
        <br />
        <label for="element-inner">element-inner</label>
        <input type="text" name="element-inner" />
        <br />
        <label for="event-listener">event-listener</label>
        <input type="text" name="event-listener" />
        <br />
        <label for="code">code</label>
        <textarea name="code" rows="7" cols="50" />
        <br />
        <input type="submit" />
      </form>
      <div id="display">
        <iframe srcdoc={srcDoc} />
      </div>
    </div>
  );
}