2023年5月10日 12:12:58go评论71阅读模式

英文:

I want to practice the usage of <dialog> tag inside the react environment. So I want to covert this HTML code into React code

问题

这里我只使用HTML。如果在HTML中使用<dialog>标签，它有一堆内置方法。其中一些在此处使用。但是，如果我在React环境中使用modal.Show()和modal.Close()方法等，它会给我错误。所以有人可以帮我将这个HTML代码转换成React代码吗？我需要保留所有属性和属性不变。

英文:

Here I use HTML only. If I use the <dialog> tag in HTML, It has a bunch of inbuild methods. Some of them are used here. But If I use modal.Show() and modal.Close() methods and more inside the React environment, It gives me errors.So Can anyone help me to convert this HTML code into react code? I need to keep all properties and attributes as it is.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;test.css&quot; /&gt;
    &lt;style&gt;
      dialog::backdrop {
        background-color: rgb(108, 113, 111);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;This is H1 Tag&lt;/h1&gt;
    &lt;button data-open-modal&gt;Open me&lt;/button&gt;
    &lt;dialog data-modal&gt;
      &lt;p close-modal&gt;X&lt;/p&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat ipsa
        quod ipsum numquam officia, eveniet deleniti aspernatur quo accusamus
        distinctio eligendi necessitatibus commodi ipsam! Doloremque quod hic
        odio placeat aliquid. Ipsam esse cumque fugiat optio inventore, eligendi
        ex tempora ad adipisci accusamus exercitationem ratione itaque sapiente.
        Eveniet pariatur iusto rem soluta tenetur nemo enim qui adipisci
        dolorem? Ullam, quibusdam neque. Nisi necessitatibus repellat

        &lt;button data-close-modal&gt;Close me&lt;/button&gt;
      &lt;/p&gt;
      &lt;form&gt;
        &lt;input type=&quot;text&quot; /&gt;
        &lt;button type=&quot;submit&quot; formmethod=&quot;dialog&quot;&gt;Close me&lt;/button&gt;
        &lt;button type=&quot;submit&quot;&gt;Submit me&lt;/button&gt;
      &lt;/form&gt;
    &lt;/dialog&gt;

    &lt;script&gt;
      const openButton = document.querySelector(&quot;[data-open-modal]&quot;);
      const closeButton = document.querySelector(&quot;[data-close-modal]&quot;);
      const modal = document.querySelector(&quot;[data-modal]&quot;);

      openButton.addEventListener(&quot;click&quot;, () =&gt; {
        modal.showModal();
      });
      closeButton.addEventListener(&quot;click&quot;, () =&gt; {
        modal.close();
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;