如何消除antd v4+ Checkbox组件的`value`无效属性警告？

核心原因 #

antd v4的单个Checkbox组件不支持value属性，你错误地直接给<Checkbox>标签传递了value={value}，这就是警告触发的根源。value属性仅用于Checkbox.Group下的子Checkbox，用来定义该选项对应的值；单个Checkbox只需用checked控制选中状态，或通过Form组件自动绑定状态。

修正方案 #

方案1：修正你的初始代码（无Form字段名的场景）

移除Checkbox上的value属性，若需要标识表单字段或控制选中状态，可按以下方式调整：

import { Checkbox, Form, Typography } from '@90poe/antdv4';
import React, { FC } from 'react';

import type { Option } from '../types';

interface Props {
    item: Option;
    onClick?: (e: Option) => void;
}

export const Test: FC<Props> = ({ item }: Props) => {
    const { value, checked = false } = item; // 假设item包含checked字段控制选中状态

    return (
        <Form.Item name={value} valuePropName="checked" noStyle>
            <Checkbox checked={checked} key={value}>
                <Typography.Text>Test</Typography.Text>
            </Checkbox>
        </Form.Item>
    );
};

• 将item.value作为Form.Item的name，用于标识表单提交时的字段key
• 用checked属性控制Checkbox的选中状态，移除原错误的value={value}

方案2：修正getFieldDecorator的代码

同样移除Checkbox上的value属性，若需要绑定表单值，通过getFieldDecorator配置处理：

<Form.Item name="checkbox">
  {getFieldDecorator('order_receiver', {
      defaultChecked: true,
      rules: [
          {
              required: false,
              message: 'Offer!',
          },
      ],
      valuePropName: "checked"
  })(
       <Checkbox key={value}>
                <Typography.Text>Test</Typography.Text>
            </Checkbox>
  )}
</Form.Item>

额外说明 #

如果需要让单个Checkbox选中时提交指定值（而非布尔值），可以在表单提交时手动转换，例如：

// 表单提交时处理
const onFinish = (values) => {
  const processedValues = {
    ...values,
    order_receiver: values.order_receiver ? item.value : null
  };
  // 提交处理逻辑
};

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