Ant-design-mobile: CheckboxItem点击后不会打勾或打勾不会消除

Created on 10 Oct 2016 · 18Comments · Source: ant-design/ant-design-mobile

本地环境

antd-mobile 版本：0.9.1
操作系统及其版本：win10
浏览器及其版本：chrome 52

你做了什么？

import React from 'react';
import { List, Checkbox } from 'antd-mobile';
import { createForm } from 'rc-form';

const CheckboxItem = Checkbox.CheckboxItem;

class AntDIndex extends React.Component {
  static defaultProps = {
    transition: 'rfr'
  };

  onClick() {
    console.log(this.props.form.getFieldsValue());
  }
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List
          renderHeader={() => '多项选择操作'}
        >
          <CheckboxItem
            {...getFieldProps('checkboxitem1', {
              initialValue: true,
              valuePropName: 'checked',
            })}
            onChange={this.onClick.bind(this)}
          >
            使用Ant Design Component
          </CheckboxItem>
          <CheckboxItem
            {...getFieldProps('checkboxitem2', {
              initialValue: false,
              valuePropName: 'checked',
            })}
          >
            个性化调整
          </CheckboxItem>
          <CheckboxItem
            disabled
            {...getFieldProps('checkboxitem3', {
              initialValue: true,
              valuePropName: 'checked',
            })}
          >
            个性化调整
          </CheckboxItem>
        </List>
      </div>
    );
  }
}
export default createForm()(AntDIndex);

你期待的结果是：

实际上的结果：

onChange事件触发了，但是勾没有变化。

Source

zhwb36

Most helpful comment

@warmhug 谢谢提醒。找到问题的原因了。一样的工程，用browser-sync+webpack-hot-middleware跑的话checkbox用不了，改为webpack-dev-server就行。奇怪

chengky on 6 Jan 2017

👍3

All 18 comments

<CheckboxItem
            {...getFieldProps('checkboxitem1', {
              initialValue: true,
              valuePropName: 'checked',
            })}
            onChange={this.onClick.bind(this)}
          >
            使用Ant Design Component
          </CheckboxItem>

rc-form 接管onChange，自己就不要设置了

pingan1927 on 10 Oct 2016

我加这段代码纯粹为了测试用，但实际上没有这段代码打勾还是不变化

zhwb36 on 11 Oct 2016

用chrome的react开发工具看看，checkboxItem大量使用，不可能有问题的

pingan1927 on 11 Oct 2016

展开没看出什么问题，但就是点击后状态没变化，是兼容性问题吗？
其它控件都在用，也没什么问题，就这，不知道是我环境问题还是代码问题

zhwb36 on 11 Oct 2016

import React from 'react';
import { List, Checkbox } from 'antd-mobile';

const CheckboxItem = Checkbox.CheckboxItem;

class AntDIndex extends React.Component {
  static defaultProps = {
    transition: 'rfr'
  };

    constructor(props) {
    super(props);
    this.state = {
            checked: true,      
    };
  }

  onClick() {
    console.log(this.props.form.getFieldsValue());
  }
  render() {
    return (
      <div>
        <List
          renderHeader={() => '多项选择操作'}
        >
          <CheckboxItem
            checked={this.state.checked}
            onChange={(e) => {alert(e.target.checked); this.setState({checked: e.target.checked})}}
          >
            使用Ant Design Component
          </CheckboxItem>
        </List>
      </div>
    );
  }
}


ReactDOM.render(<AntDIndex />, mountNode);

这段代码运行符合预期，请对照着看看还有什么其他问题

pingan1927 on 11 Oct 2016

谢谢你，我自查出了rc-form与另一个第三方控件发生冲突，具体原因不明，但checkboxitem是OK的，辛苦！

zhwb36 on 12 Oct 2016

自己关掉 issue 吧。

afc163 on 12 Oct 2016

@zhwb36 请问你是与什么第三方冲突，我这里也出现这个问题。我只使用了redux,redux-saga相关。checkbox点击不会改变选中状态，也不会改变值。但初始化状态是可以的。我使用0.9.13以及1.0.0-beta.0都是如此。使用方法与官方demo一样用法，观察dom节点，发现官方的选中后，html代码为：

<span class="am-checkbox am-checkbox-checked am-checkbox-checked-1">
    <span class="am-checkbox-inner"></span>
    <input type="checkbox" class="am-checkbox-input" value="on">
</span>

而我的html代码为：

<span class="am-checkbox am-checkbox-focused">
    <span class="am-checkbox-inner"></span>
    <input type="checkbox" class="am-checkbox-input" value="on">
</span>

chengky on 5 Jan 2017

@chengky 注意受控时即设置了 checked 、还需要设置 onChange 来改变 checked 的状态。

warmhug on 5 Jan 2017

@warmhug 谢谢提醒。找到问题的原因了。一样的工程，用browser-sync+webpack-hot-middleware跑的话checkbox用不了，改为webpack-dev-server就行。奇怪

chengky on 6 Jan 2017

👍3

@chengky 我也发现了这个问题

scholar-ink on 10 Jan 2017

@chengky 我也发现了这个问题

vnicers on 1 Mar 2017

有问题请详细描述下：组件库版本号、运行环境，最好能给出可重现 demo

warmhug on 1 Mar 2017

@warmhug @chengky @scholar-ink 不是antd-mobile的问题、是browser-sync 的原因，如果使用了browser-sync这个浏览器同步插件的话。在它后台配置界面有一个Sync Options 选项默认是开启的。其中就有一条就是 Forms:toggles 这个选项，会同步点击单选框或者多选框这些动作到其他浏览器或者设备上。关掉它就OK了。
default