reactjs - Ant Design - 复选框的垂直组

Question

我正在尝试使用 Ant 设计制作一列复选框。我试过了:

 <Checkbox.Group>
          <Checkbox>Hello</Checkbox>
          <Checkbox>Hello1</Checkbox>
          <Checkbox>Hello2</Checkbox>
</Checkbox.Group>

和:

<CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />

但是，似乎没有使复选框出现在列而不是行中的选项。我知道我可以使用 flexbox，但我希望 Ant 设计有一种内置方法可以让复选框垂直显示(在列中)，而不是出现在水平行中。

是否有垂直堆叠复选框的简单解决方案？

Answer 1

从 <label> 开始就不像以前那样了它呈现的是 display: inline-block .最简单的解决方案(除了重写组件)是更改 .ant-checkbox-group-item的属性来自(你总是可以用另一个类名包裹 CheckBox 以选择性地应用，而不是全局应用):

.ant-checkbox-group-item {
    display: inline-block;
    margin-right: 8px;
}

到:

.ant-checkbox-group-item {
    display: block;
    margin-right: 0;
}

这将使它看起来像这样:


或者，您还可以添加 display: inline-block归因于 .ant-checkbox-group的风格。

这将使它看起来像这样:


另一种解决方案是创建一些可重用的组件并通过 style 应用上述内容。属性(诚然，这不是一个优雅的解决方案，因为 CheckboxGroup 的 onChange 函数期望处理 options ，但您必须拦截它们以更改 Checkbox 的样式属性)。

工作示例: https://codesandbox.io/s/w0voxxxzm5

Checkbox.js

import React from "react";
import { Checkbox } from "antd";

export default ({ disabled, label, value, handleChange }) => (
  <Checkbox
    style={{ display: "block", marginLeft: 0 }}
    disabled={disabled || false}
    label={label}
    checked={value}
    onChange={handleChange}
  >
    {label}
  </Checkbox>
);

CheckboxGroup.js

import React from "react";
import Checkbox from "./Checkbox";

export default ({ options, ...props }) => (
  <div
    className="ant-checkbox-group"
    style={{ display: "inline-block", marginRight: 10 }}
  >
    {options.map(label => (
      <Checkbox
        key={label}
        label={label}
        disabled={props.disabled}
        handleChange={props.handleChange}
        value={props[label]}
      />
    ))}
  </div>
);

Form.js

import React, { Component } from "react";
import CheckboxGroup from "./CheckboxGroup";

const options1 = ["Apple", "Pear", "Orange"];
const options2 = ["Strawberry", "Grape", "Mango"];
const options3 = ["Kiwi", "Banana", "Cherry"];

export default class Form extends Component {
  state = {};

  handleChange = ({ target: { label, checked } }) =>
    this.setState({ [label]: checked });

  handleSubmit = e => {
    e.preventDefault();

    alert(JSON.stringify(this.state, null, 4));
  };

  render = () => (
    <form onSubmit={this.handleSubmit}>
      <CheckboxGroup
        {...this.state}
        options={options1}
        handleChange={this.handleChange}
      />
      <CheckboxGroup
        {...this.state}
        options={options2}
        handleChange={this.handleChange}
      />
      <CheckboxGroup
        {...this.state}
        options={options3}
        handleChange={this.handleChange}
        disabled
      />
      <div style={{ marginTop: 20 }}>
        <button className="ant-btn ant-btn-primary" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}