antd中Checkbox.Group给的默认值为什么不生效

<Checkbox.Group defaultValue={["1","2"]} key="2222222">
  <Checkbox value="8" >全选</Checkbox>
  <br />
  <Checkbox value="0" ></Checkbox>
  <Checkbox value="1" ></Checkbox>
  <Checkbox value="2" ></Checkbox>
  <Checkbox value="3" ></Checkbox>
  <Checkbox value="4" ></Checkbox>
  <Checkbox value="5" ></Checkbox>
  <Checkbox value="6" ></Checkbox>
</Checkbox.Group>

1.antd中Checkbox.Group给的默认值为什么不生效
2.看到有人说给key值就可以生效,为什么还是不能生效

你是把这个写在form表单里了吗,场景是什么,如果写在form表单里可能就不会生效了

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox } from 'antd';

function onChange(checkedValues) {
console.log('checked = ', checkedValues);
}

const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];

ReactDOM.render(
<>
<Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />




<Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />




<Checkbox.Group
options={optionsWithDisabled}
disabled
defaultValue={['Apple']}
onChange={onChange}
/>
</>,
document.getElementById('container'),
);

看一下官网的Demo,改变一下写法?


https://codepen.io/guyu521/pen/Yzrdawj?editors=001

我试了一下可以生效 4.x,3.x都生效了

注意 defaultValue={["1"]} 一定要和value 类型相等 。你写成 defaultValue={[1]} 数组 不加引号 就会不生效 。包括 tree,select都是这样

按照你的写法,试了下是可以的,看下有没有报错

我在这边测试的是没问题的

img

你可以这样试一下,因为你的 Checkbox 肯定是 map循环渲染出来的

const { Checkbox, Row, Col } = antd;

function onChange(checkedValues) {
  console.log("checked = ", checkedValues);
}
const checkArr = ["1", "2"];
const checkBoxArr = ["1", "2", "3", "4", "5", "6", "7"];
ReactDOM.render(
  <Checkbox.Group defaultValue={["1", "2"]} key="2222222">
    <Checkbox value="8">全选</Checkbox>
    <br />
    {checkBoxArr.map((item) => {
      return (
        <Checkbox value={item} checked={checkBoxArr.includes(item)}>
          {item}
        </Checkbox>
      );
    })}
  </Checkbox.Group>,
  mountNode
);

img

可能是类型的原因,defaultValue里的是字符串,value里的是number