React 和 SASS - 复选框组件未与标签对齐

Question

我是 React 的新手，我将以前纯 HTML 页面转换为 React 中的组件。如何更新 SASS 样式表以类似于以前的 HTML 格式？

这是我目前在 React 中的内容（复选框显示在右侧而不是左侧，并且复选框和标签未对齐）：

这是我之前在 HTML 中拥有的，理想的格式：

checkbox.component.jsx

import React from "react";

import './checkbox.styles.scss'

const Checkbox = ({ label, isSelected, onCheckboxChange }) => (
  <div className="form-check">
    <li>
    <label for={label}> {label} </label>
      <input 
        type="checkbox"
        name={label}
        id={label}
        value={label}
        checked={isSelected}
        onChange={onCheckboxChange}
      />
    </li>
  </div>
);

export default Checkbox;

checkbox.styles.scss

.form-check{


li{
    list-style: none;
    margin-left: 15px;
    text-align:left;
}
  label{
     cursor: pointer;    
  }
    
  label:hover{
      background-color:linen;
      text-decoration:underline;
  }

}

Answer 1

首先 - 您需要将 div 移动到 li 内 - 列表中唯一有效的子元素是 li 元素。

如果您使用标签包装输入，您将获得对齐以及能够单击标签以更改复选框的额外好处。显然我已经用静态内容替换了 React 插值。

ul {list-style: none}

ul li {padding: 8px 0}

<ul>
   <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-1"
          id="form-check-1"
          value="1"
          checked=checked
        />
       $ - $0 - 50 </label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-2"
          id="form-check-2"
          value="2"
        />
       $$ - $51 - 100</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-3"
          id="form-check-3"
          value="3"
        />
       $$$ - $101 - 150</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-4"
          id="form-check-4"
          value="4"
        />
       $$$$ - $150+</label>
     </div>
    </li>
  </ul>

另外 - 由于这些选项似乎相互排斥 - 我建议单选按钮组更合适 - 这样一次只能选择一个选项。使用复选框将允许多选 - 在这种情况下可能不打算这样做。

单选按钮方法（我会推荐） - 对 hte 单选输入的所有实例使用相同的名称属性。

ul {list-style: none}

ul li {padding: 8px 0}

<ul>
   <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-1"
          value="1"
          checked=checked
        />
       $ - $0 - 50 </label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-2"
          value="2"
        />
       $$ - $51 - 100</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-3"
          value="3"
        />
       $$$ - $101 - 150</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-4"
          value="4"
        />
       $$$$ - $150+</label>
     </div>
    </li>
  </ul>