New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox多选框:使用Checkbox.Group后Checkbox的onChange失效 #12642

Closed
sunguoxing0628 opened this Issue Oct 15, 2018 · 5 comments

Comments

Projects
None yet
4 participants
@sunguoxing0628

sunguoxing0628 commented Oct 15, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

antd 3.10.1

Environment

macOS; Google Chrome,Safari

Reproduction link

Edit on CodeSandbox

Steps to reproduce

问题:代码中使用CheckboxGroup(Checkbox.Group)CheckboxonChange失效。

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox, message, version } from "antd";
import "antd/dist/antd.css";
import "./index.css";

const CheckboxGroup = Checkbox.Group;

const App = () => (
  <div className="App">
    <p>Current antd version: {version}</p>
    <div>
      <CheckboxGroup>
        <Checkbox
          value="apple"
          onChange={e => {
            message.info(`${e.target.value}:${e.target.checked}`);
          }}
        >
          apple
        </Checkbox>
      </CheckboxGroup>
    </div>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

What is expected?

特殊场景下使用Checkbox.Group后,需要使用Checkbox的onChange事件。

What is actually happening?

使用Checkbox.Group后Checkbox的onChange失效。

@afc163

This comment has been minimized.

Member

afc163 commented Oct 15, 2018

特殊场景下使用Checkbox.Group后,需要使用Checkbox的onChange事件。

能描述一下这个场景么?

@sunguoxing0628

This comment has been minimized.

sunguoxing0628 commented Oct 15, 2018

特殊场景下使用Checkbox.Group后,需要使用复选框的的onChange事件。

能描述一下这个场景么?

实际需要
1、在地图类程序中需要分别控制多个图层的显示和隐藏(就是很多个Checkbox),Checkbox.Group的回调函数onChange只能获取到所有checked = true的选项,无法定位checked发生变动的项目。
2、目前无法改动整体代码结构,只能考虑控件自带函数的使用。
想到的解决办法
1、允许Checkbox.Group内的Checkbox触发onChange
2、Checkbox.Group的回调事件onChange除了checkedValue外,增加引发变动的对象e:Event

@afc163

This comment has been minimized.

Member

afc163 commented Oct 15, 2018

在地图类程序中需要分别控制多个图层的显示和隐藏(就是很多个Checkbox),Checkbox.Group的回调函数onChange只能获取到所有checked = true的选项,无法定位checked发生变动的项目。

看这个描述只需要 Checkbox.Group 的 onChange 就能实现了。只需要拿到所有 checked = true 的选项作为状态,相应显示对应的图层就可以了。

@sunguoxing0628

This comment has been minimized.

sunguoxing0628 commented Oct 16, 2018

在地图类程序中需要分别控制多个图层的显示和隐藏(就是很多个Checkbox),Checkbox.Group的回调函数onChange只能获取到所有checked = true的选项,无法定位checked发生变动的项目。

看这个描述只需要 Checkbox.Group 的 onChange 就能实现了。只需要拿到所有 checked = true 的选项作为状态,相应显示对应的图层就可以了。

首先,谢谢您对问题的跟进,我这边问题其实已经处理了,现在这个情况下有好几种解决方案的,我用的方式是保存事件发生前后的数据oldCheckedValue, checkedValue,然后查找差异项differenceValue,这是我目前想到的对其他项影响较小的方案。

这个问题只是在我使用过程中发现的问题,我只是觉得如果组件支持以下两种方案的其中一种,可能会让组件可控性更高些。

1、允许Checkbox.Group内的Checkbox触发onChange;
2、Checkbox.Group的回调事件onChange除了checkedValue外,增加引发变动的对象e:Event;

zombieJ added a commit that referenced this issue Oct 23, 2018

@zombieJ

This comment has been minimized.

Member

zombieJ commented Oct 23, 2018

赞同 @afc163 的观点,CheckBox Group 足够实现这个需求了。不过 CheckBox 不触发 onChange 比较反直觉。修了。

@zombieJ zombieJ closed this Oct 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment