时间戳

首页 > 解决方案 > Bulma Extensions switch：我如何让它切换

bulma - Bulma Extensions switch：我如何让它切换

问题描述

当我尝试使用演示中的开关时，它不动。

当我单击它时，我可以看到它控制台记录我的处理程序中的单击，或者在它集中时使用空格键。

因为我是动态加载这些的，所以我用相同的值生成我的 id、名称和标签“for”，即：isActive-n。

开关在页面上正确加载，看起来很棒，只是不动。我尝试了几种不同的 id/label 值格式，但没有任何效果。

这是我的反应组件的开关部分：

      <div className="column is-2">
          <div className="field is-pulled-right">
            <input
              id={`isActive-${props.id}`}
              type="checkbox"
              name={`isActive-${props.id}`}
              className="switch is-success is-rounded"
              checked={checked}
              onChange={swithOnChangeHandler}
            />
            <label htmlFor={`isActive-${props.id}`}>{label}</label>
          </div>
        </div>

这是生成的 HTML：

<div class="column is-2">
    <div class="field is-pulled-right">
        <input id="isActive-11" type="checkbox" name="isActive-11" class="switch is-success is-rounded is-small">
        <label for="isActive-11">Activate</label>
    </div>
</div>

标签： bulma

解决方案

最终成为输入检查属性的状态问题。我设置它的逻辑是错误的。我也开始使用trueandfalse作为检查值。

推荐阅读