CheckboxItem点击后不会打勾或打勾不会消除

[zhwb36]

本地环境

• 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事件触发了，但是勾没有变化。

[pingan1927]

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

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

[zhwb36]

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

[pingan1927]

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

[zhwb36]

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

[pingan1927]

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);

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

[zhwb36]

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

[afc163]

自己关掉 issue 吧。

[chengky]

@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>

[warmhug]

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

[chengky]

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

[scholar-ink]

@chengky 我也发现了这个问题

[vnicers]

@chengky 我也发现了这个问题

[warmhug]

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

[vnicers]

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

[afc163]

browser-sync 的问题在 react-component/checkbox#32 里修复了。

[vnicers]

@afc163 谢谢 好像是昨天刚修复的。那下一个版本的antd-mobile中可以和browser-sync正常使用了吧 ?。

[paranoidjk]

@vnice antd-mobile 本周五的release会升级 rc-checkbox来修复这个问题

[kaykie]

直接把onChange函数删除就可以了. 因为这个函数在 以为要执行,结果又什么都没变,所以页面上就什么都没有变化 了