Skip to content
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 · 10 comments
Closed

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

sunguoxing0628 opened this issue Oct 15, 2018 · 10 comments

Comments

@sunguoxing0628
Copy link

@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
Copy link
Member

@afc163 afc163 commented Oct 15, 2018

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

能描述一下这个场景么?

@sunguoxing0628
Copy link
Author

@sunguoxing0628 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
Copy link
Member

@afc163 afc163 commented Oct 15, 2018

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

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

@sunguoxing0628
Copy link
Author

@sunguoxing0628 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
Copy link
Member

@zombieJ zombieJ commented Oct 23, 2018

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

@zombieJ zombieJ closed this Oct 23, 2018
@Gemiry
Copy link

@Gemiry Gemiry commented Dec 22, 2018

我也是遇到这种需求了,每次都要对比,很多复杂场景需要用,codeopen上面用官方的例子改了下又可以实现,自己项目中又没法用,不知道作者可否更新上啊,

@guozhengzhongGit
Copy link

@guozhengzhongGit guozhengzhongGit commented Aug 6, 2019

在地图类程序中需要分别控制多个图层的显示和隐藏(就是很多个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;

您好,我有一个疑问,checkboxGroup 上的 onChange 事件,去改变某些图层的状态;单独加在某个 checkbox 上的 onChange 事件,也是去改变某个图层的状态,会冲突嘛?也就是说,点击了某个单独绑定了 onChange 事件的 checkbox,它的 onChange 事件会触发,但是 checkboxGroup 上的 onChange 事件也会触发吧?不知道您是怎么处理这个问题的?

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Aug 6, 2019

@guozhengzhongGit , 在 Group 下使用应该用 Group 的 onChange 做状态管理,Checkbox 的 onChange 可能会用于其他触发,但不应该参与状态管理。

@guozhengzhongGit
Copy link

@guozhengzhongGit guozhengzhongGit commented Aug 21, 2019

@guozhengzhongGit , 在 Group 下使用应该用 Group 的 onChange 做状态管理,Checkbox 的 onChange 可能会用于其他触发,但不应该参与状态管理。

啊,意思是说,要改变 store 中的数据,只用 group 的 change 事件;如果有特殊的某个 checkbox 被点击有额外的操作,可以在它上面的 change 事件里完成哈

@leimbag
Copy link

@leimbag leimbag commented Jan 15, 2020

同一个页面,如果有多组CheckboxGroup时,无法指导具体哪个组发生变化,最好能返回具体的CheckboxGroup的name或者e,方便整体处理,场景:问卷调查时,期待能提供方案

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants