React Ant Design Checkbox组件在编辑时无法初始化选中问题如何解决？-js教程-PHP中文网

React Ant Design Checkbox组件在编辑时无法初始化选中问题如何解决？

心靈之曲

发布： 2024-11-15 08:12:01

原创

759人浏览过

react ant design checkbox组件在编辑时无法初始化选中问题如何解决？

react的ant design checkbox组件在编辑时无法初始化选中

问题中给出的react代码中存在checkbox无法在编辑时初始化选中的问题，这个问题可能由以下原因引起：

使用key属性初始化checkbox group

在给出的代码中，checkbox.group组件没有使用key属性。在react中，列表项必须具有唯一的key值。可以通过将itemsource中的项目映射到新的对象，并使用该对象的id或名称作为key，来解决此问题。修改后的代码如下：

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

{itemsource?.map((item, idx) => {
  return (
    <react.fragment key={+new date() + '_' + idx}>
      <row>
        <col span={24}>
          <div style={{ fontweight: 'bold', marginbottom: '10px' }}>{item.groupname}</div>
        </col>
      </row>
      <row>
        {item.protocolitemgrouplist?.map((item2, idx2) => {
          return (
            <react.fragment key={+new date() + '_' + idx + '_' + idx2}>
              <col span={6} style={{ display: 'inline-block' }}>
                <div style={{ marginbottom: '15px' }}>
                  <checkbox value={item2.id + '___' + item2.itemname}>{item2.itemname}</checkbox>
                </div>
              </col>
            </react.fragment>
          );
        })}
      </row>
    </react.fragment>
  );
})}

登录后复制

使用initialvalue初始化checkbox group

在checkbox.group组件中，可以使用initialvalue属性来初始化选中的值。修改后的代码如下：

<Checkbox.Group
  style={{ width: '100%' }}
  key={defaultCheckboxValue}
  initialValue={defaultCheckboxValue}
  onChange={(checkedValues) => onChangeCheckbox(checkedValues)}
>
  {/* ... */}
</Checkbox.Group>

登录后复制

通过以上修改，在编辑时应该就可以初始化选中checkbox。

以上就是React Ant Design Checkbox组件在编辑时无法初始化选中问题如何解决？的详细内容，更多请关注php中文网其它相关文章！