react-bootstrap 使用按钮做单选按钮和复选按钮的效果

最新推荐文章于 2024-09-02 07:58:44 发布

徐同保

最新推荐文章于 2024-09-02 07:58:44 发布

阅读量653

点赞数

分类专栏： web前端文章标签： bootstrap react.js html

本文链接：https://blog.csdn.net/xutongbao/article/details/122015247

版权

web前端专栏收录该内容

735 篇文章 16 订阅

订阅专栏

  <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
    <ToggleButton id="tbg-check-1" value={1}>
      Checkbox 1 (pre-checked)
    </ToggleButton>
    <ToggleButton id="tbg-check-2" value={2}>
      Checkbox 2
    </ToggleButton>
    <ToggleButton id="tbg-check-3" value={3}>
      Checkbox 3 (pre-checked)
    </ToggleButton>
  </ToggleButtonGroup>
  <br />
  <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
    <ToggleButton id="tbg-radio-1" value={1}>
      Radio 1 (pre-checked)
    </ToggleButton>
    <ToggleButton id="tbg-radio-2" value={2}>
      Radio 2
    </ToggleButton>
    <ToggleButton id="tbg-radio-3" value={3}>
      Radio 3
    </ToggleButton>
  </ToggleButtonGroup>

function ToggleButtonGroupControlled() {
  const [value, setValue] = useState([1, 3]);

  /*
   * The second argument that will be passed to
   * `handleChange` from `ToggleButtonGroup`
   * is the SyntheticEvent object, but we are
   * not using it in this example so we will omit it.
   */
  const handleChange = (val) => setValue(val);

  return (
    <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
      <ToggleButton id="tbg-btn-1" value={1}>
        Option 1
      </ToggleButton>
      <ToggleButton id="tbg-btn-2" value={2}>
        Option 2
      </ToggleButton>
      <ToggleButton id="tbg-btn-3" value={3}>
        Option 3
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

render(<ToggleButtonGroupControlled />);