Ant Design表单全选问题：JSX元素入数组显示[object Object]

你的问题出在两个核心点：

1. 把JSX元素用${}转成字符串，React元素转成字符串后默认输出[object Object]，这就是浏览器显示异常的原因；
2. Ant Design的Checkbox.Group的options属性不支持直接传入JSX元素，它仅接受字符串数组或{ label: string, value: string }格式的对象数组。

要实现带自定义内容（比如chk B后跟随Select）的Checkbox全选，你需要放弃Checkbox.Group，手动渲染每个选项并维护选中状态，同时结合Form的表单逻辑。

修改后的完整代码 #

import React, { useState } from "react";
import { Form, Divider, Checkbox, Select, Button, Row, Col } from "antd";

const ChkComponent = () => {
  const [extra, setExtra] = useState('');
  const [checkedList, setCheckedList] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const [form] = Form.useForm();

  // 定义每个选项的配置：key用于唯一标识，content存放对应的JSX内容
  const options = [
    {
      key: 'chkA',
      content: (
        <Form.Item className="form-content">
          <span>chk A</span>
        </Form.Item>
      )
    },
    {
      key: 'chkB',
      content: (
        <Form.Item 
          name="chkb"
          className="form-content" 
          rules={[
            {
              validator: (_, value) => {
                // 只有当chkB被选中时，才要求Select必须选值
                if (checkedList.includes('chkB') && !value) {
                  return Promise.reject(new Error('Please select an option'));
                }
                return Promise.resolve();
              }
            },
          ]}
        >
          <Select defaultValue="" className="form-input">
            <Select.Option value=""></Select.Option>
            <Select.Option value="a">A</Select.Option>
            <Select.Option value="b">B</Select.Option>
          </Select>
        </Form.Item>
      )
    },
    {
      key: 'intermediateData',
      content: (
        <Form.Item className="form-content">
          <span>Intermediate Data</span>
        </Form.Item>
      )
    }
  ];

  const handleOptionChange = (key) => {
    let newCheckedList;
    if (checkedList.includes(key)) {
      newCheckedList = checkedList.filter(item => item !== key);
    } else {
      newCheckedList = [...checkedList, key];
    }
    setCheckedList(newCheckedList);
    setIndeterminate(!!newCheckedList.length && newCheckedList.length < options.length);
    setCheckAll(newCheckedList.length === options.length);
  };

  const onCheckAllChange = (e) => {
    const newCheckedList = e.target.checked ? options.map(item => item.key) : [];
    setCheckedList(newCheckedList);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    setExtra('Folder Path: ~/datasdtmplus/*.sas7bdat');
    console.log(extra);
  };

  return (
    <div className="container">
      <Form
        form={form}
        wrapperCol={{ span: 12 }}
        layout="horizontal"
        size={12}
        onFinish={onFinish}
      >
        <Row>
          <Col span={12}>
            <Form.Item className='form-content'>
              <Checkbox 
                indeterminate={indeterminate} 
                onChange={onCheckAllChange} 
                checked={checkAll}
              >
                Check all
              </Checkbox>
            </Form.Item>
          </Col>
        </Row>
        <Divider className="form-devider"/>
        <Row>
          <Col span={12}>
            {options.map(item => (
              <div key={item.key} style={{ marginBottom: 8 }}>
                <Checkbox
                  checked={checkedList.includes(item.key)}
                  onChange={() => handleOptionChange(item.key)}
                >
                  {item.content}
                </Checkbox>
              </div>
            ))}
          </Col>
        </Row>
        <Divider className="form-devider" />
        <Form.Item>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ChkComponent;

关键改动说明 #

1. 重构选项结构：用key唯一标记每个选项，content存放对应的JSX内容，彻底避免把JSX转成字符串的错误操作。
2. 优化状态管理：checkedList存储选中选项的key，而非JSX元素，状态更新和判断逻辑更简洁可靠。
3. 手动渲染与控制：遍历选项数组，每个选项用Checkbox包裹，通过checked属性控制选中状态，绑定自定义事件更新选中列表。
4. 适配表单验证：给chkB的Select添加自定义验证规则，只有当对应的Checkbox被选中时，才触发必填验证，避免未选中时的无效校验。
5. 全选逻辑调整：全选时直接收集所有选项的key，取消全选则清空数组，逻辑清晰且符合预期。

内容的提问来源于stack exchange，提问作者Ranjan Kumar