非React环境下使用Shopify Polaris的问题：模态框与数字输入失效

我来帮你搞定这两个问题，毕竟纯HTML/CSS用Polaris确实会碰到这类交互缺失的情况——谁让Polaris本来就是为React量身打造的呢~

一、非React环境下自定义模态框内的表单 #

Polaris的模态框组件只用纯HTML/CSS的话，只能拿到静态样式结构，所有交互和内容修改都得靠你自己用JavaScript实现：

• 先手动搭建模态框的HTML结构（参考Polaris的样式类名即可）
• 通过JS控制模态框的显示/隐藏（比如添加/移除Polaris-Modal--open这类样式类）
• 表单内容的修改直接通过DOM操作更新元素的值、状态就行

给你个简单的模态框+表单示例结构：

<!-- 触发按钮 -->
<button class="Polaris-Button" id="openModalBtn">打开模态框</button>

<!-- 模态框容器 -->
<div class="Polaris-Modal Polaris-Modal--small" id="customModal" style="display: none;">
  <div class="Polaris-Modal__Overlay"></div>
  <div class="Polaris-Modal__Content">
    <div class="Polaris-Modal__Header">
      <h2 class="Polaris-Modal__Title">自定义表单</h2>
      <button class="Polaris-Button Polaris-Button--plain Polaris-Modal__CloseButton" id="closeModalBtn">
        <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M11.414 10l4.293-4.293a1 1 0 10-1.414-1.414L10 8.586 5.707 4.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 11.414l4.293 4.293a1 1 0 001.414-1.414L11.414 10z"></path></svg></span>
      </button>
    </div>
    <div class="Polaris-Modal__Body">
      <!-- 这里放你的表单内容 -->
      <div class="Polaris-Labelled__LabelWrapper">
        <div class="Polaris-Label">
          <label id="modalQuantityLabel" for="modalQuantity" class="Polaris-Label__Text">数量</label>
        </div>
      </div>
      <div class="Polaris-TextField Polaris-TextField--hasValue">
        <input id="modalQuantity" class="Polaris-TextField__Input" type="number" aria-labelledby="modalQuantityLabel" aria-invalid="false" value="1">
        <div class="Polaris-TextField__Spinner" aria-hidden="true">
          <div role="button" class="Polaris-TextField__Segment" tabindex="0">
            <div class="Polaris-TextField__SpinnerIcon">
              <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M15 12l-5-5-5 5z"></path></svg></span>
            </div>
          </div>
          <div role="button" class="Polaris-TextField__Segment" tabindex="0">
            <div class="Polaris-TextField__SpinnerIcon">
              <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path></svg></span>
            </div>
          </div>
        </div>
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
    <div class="Polaris-Modal__Footer">
      <button class="Polaris-Button Polaris-Button--secondary" id="cancelModalBtn">取消</button>
      <button class="Polaris-Button" id="submitModalBtn">提交</button>
    </div>
  </div>
</div>

再加上对应的JS处理交互：

// 获取元素
const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const cancelModalBtn = document.getElementById('cancelModalBtn');
const customModal = document.getElementById('customModal');

// 打开模态框
openModalBtn.addEventListener('click', () => {
  customModal.style.display = 'block';
  setTimeout(() => {
    customModal.classList.add('Polaris-Modal--open');
  }, 10);
});

// 关闭模态框
function closeModal() {
  customModal.classList.remove('Polaris-Modal--open');
  setTimeout(() => {
    customModal.style.display = 'none';
  }, 300);
}

closeModalBtn.addEventListener('click', closeModal);
cancelModalBtn.addEventListener('click', closeModal);

// 点击遮罩关闭模态框
customModal.querySelector('.Polaris-Modal__Overlay').addEventListener('click', closeModal);

二、修复数字输入框的增减箭头功能 #

你代码里的增减箭头只是静态HTML结构，没绑定任何JS事件，自然点了没反应。我们给这两个箭头加点击事件，就能实现数值增减了：

修改后的完整代码如下：

<html> 
<head> 
  <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-rc.3/polaris.min.css" /> 
</head> 
<body> 
  <div> 
    <div class="Polaris-Labelled__LabelWrapper"> 
      <div class="Polaris-Label"> 
        <label id="TextField3Label" for="TextField3" class="Polaris-Label__Text">Quantity</label> 
      </div> 
    </div> 
    <div class="Polaris-TextField Polaris-TextField--hasValue"> 
      <input id="TextField3" class="Polaris-TextField__Input" type="number" aria-labelledby="TextField3Label" aria-invalid="false" value="1" min="1"> 
      <div class="Polaris-TextField__Spinner" aria-hidden="true"> 
        <div role="button" class="Polaris-TextField__Segment" tabindex="0" id="decreaseBtn"> 
          <div class="Polaris-TextField__SpinnerIcon"> 
            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M15 12l-5-5-5 5z"></path></svg></span> 
          </div> 
        </div> 
        <div role="button" class="Polaris-TextField__Segment" tabindex="0" id="increaseBtn"> 
          <div class="Polaris-TextField__SpinnerIcon"> 
            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path></svg></span> 
          </div> 
        </div> 
      </div> 
      <div class="Polaris-TextField__Backdrop"></div> 
    </div> 
  </div>

  <script>
    // 获取输入框和按钮元素
    const quantityInput = document.getElementById('TextField3');
    const decreaseBtn = document.getElementById('decreaseBtn');
    const increaseBtn = document.getElementById('increaseBtn');

    // 减少数量
    decreaseBtn.addEventListener('click', () => {
      let currentValue = parseInt(quantityInput.value);
      if (currentValue > parseInt(quantityInput.min) || quantityInput.min === '') {
        quantityInput.value = currentValue - 1;
      }
    });

    // 增加数量
    increaseBtn.addEventListener('click', () => {
      let currentValue = parseInt(quantityInput.value);
      quantityInput.value = currentValue + 1;
    });

    // 支持键盘回车/空格触发按钮（符合可访问性要求）
    [decreaseBtn, increaseBtn].forEach(btn => {
      btn.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          btn.click();
        }
      });
    });
  </script>
</body> 
</html>

代码说明： #

1. 给增减按钮加了id，方便快速获取元素
2. 绑定点击事件修改输入框数值，同时考虑了min属性的限制
3. 添加键盘事件支持，符合Polaris的可访问性规范（毕竟按钮设置了role="button"）

内容的提问来源于stack exchange，提问作者Akshay Vaghasiya