react-component / checkbox Goto Github PK

Someone may want to mimic windows folder selection. For example, select multiple items hold down the CTRL key,or select a few items at the same time hold down the SHIFT key. To do that I need an event object in onChange handler so that i can get some attributes like crtlKey and shiftKey of e.nativeEvent.

related ant-design/ant-design#9368

Issue

• happens in e.target.checked: Property 'checked' does not exist on type 'EventTarget'.

<Checkbox checked={x} onChange={(e) => setX(e.target.checked)} />

Suggestion

• in index.d.ts

export interface Props {
  onChange?: (e: Event) => void;
}

• to sth like following

interface Target extends Props {
  checked: boolean;
}

interface ChangeEvent {
  target: Target;
  stopPropagation: () => void;
  preventDefault: () => void;
  nativeEvent: Object;
}

export interface Props {
  onChange?: (e: ChangeEvent) => void;
}

如果有多组checkGroup会造成参数共用的情况

rc-chekcbox version: 2.2.0
react version: 15.5.4

引入了不兼容的变更，导致在 react 15 下 value 不受控，选中状态无法通过外部传入 prop: value 改变

Link to code example:

   const { check } = this.state;
    return (
        <Checkbox checked={check} onChange={() => this.setState({ check: !check })} />
    );

请教一下

目前使用 Event 挺好的。我只是想请教作者们在回调时传递 Event 对象而不是直接传递 e.target.checked 的原因

<Checkbox onChange={function(checked){

}} />

因为我在实现一些组件时会考虑如下2点：

• 传 Event 可维护性和适用场景更好
• 直接传 checked 所有组件 onChange 回调参数格式一致，能保持同一家族组件接口一致。

It should be set to number, not to string.

Unnecessary Warning

my code:

import CheckBox from 'rc-checkbox'; 
...
 <CheckBox
          color="#29363d"
          checked={historyItem.pdf}
          className="checkbox-design"
        />

When i load this compoent is shows Warning as below,

Warning: Failed prop type: Invalid prop 'checked' supplied to 'Checkbox'. in Checkbox (created by xyz)

i hope this will help...

参考ant-design的这个issue Key events on checkbox #27757

checkbox没有正确的调用相应的事件handler，可以直接查看 这个

重现方法：同 ant-design的issue，点击input/RcCheckBox后，按下键盘按键。

https://jinlong.github.io/2016/01/14/checkbox-trickery-with-css/

ref ant-design/ant-design#1358

https://github.com/react-component/checkbox/blob/master/src/Checkbox.jsx#L65

See https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Hello rc-checkbox auther,
Thank you so much for good component.

Do you have a plan to support tabIndex?
I'd like to ignore the checkbox during tab key jumping.

Thanks,

When you try to print the checkbox component, the checked values do not appear in the component
Can be seen here:
http://react-component.github.io/checkbox/examples/simple.html
and try to print

Installed from antd and the rc-checkbox is missing lib directory. Can you kindly look into this issue? Possibly due to npm ignore properties.

Thank you!

Happy to send a PR :)

From react/flow docs:

Note: To get the element instance, like HTMLButtonElement in the example above, it is a common mistake to use event.target instead of event.currentTarget. The reason why you want to use event.currentTarget is that event.target may be the wrong element due to event propagation.

Relevant code:

  handleChange = (e) => {
    const { props } = this;
    if (props.disabled) {
      return;
    }
    if (!('checked' in props)) {
      this.setState({
        checked: e.target.checked,
      });
    }
    props.onChange({
+     currentTarget: e.currentTarget,
      target: {
        ...props,
        checked: e.target.checked,
      },
      stopPropagation() {
        e.stopPropagation();
      },
      preventDefault() {
        e.preventDefault();
      },
      nativeEvent: e.nativeEvent,
    });
  };

Help please, rc-component doesn't work with React ref, when native checkboxes works fine:

Sample:
https://codesandbox.io/s/vigorous-herschel-hm7n6?file=/src/index.js

examples not working

http://react-component.github.io/checkbox/examples/simple.html

Uncaught Error: Cannot find module "rc-checkbox/assets/index.css"

componentWillReceiveProps needs to be removed to eliminate this warning:

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Offending implementation found here:

#19 broke support for browser-sync from #13

ref ant-design/ant-design#2744

和原生 checkbox 一致

label 由用户自己控制

<Checkbox /><label>q</labe>

Checkbox.js:110 Uncaught TypeError: Cannot read property 'string' of undefined

wrong work with PropTypes

/** We only think `undefined` is empty */
function hasValue(value: any) {
  return value !== undefined;
}

I think using useMergedState is unreasonable

<Checkbox checked={null} defaultChecked={true} onChange={onChange}>
    Checkbox
</Checkbox>
{/* Correct */}
<input type="checkbox" checked={null} defaultChecked />

Show different results

If I pass the title as a prop to the Checkbox component, it will be removed before passing it to the HTML attribute title.
Like the data-*, aria-* and role attributes it should be passed over to the HTML.

E.g.
<Checkbox title="Dr. Prof." />
should be mapped to
<input type="checkbox" title="Dr. Prof." />.

<input {...this.props} ... />

Current index.d.ts declares every prop as required. This is not actually true and completely breaks ability of the component being used with ts. I propose to make everything optional. It should not break any compatibility while make the component easier to use. Also it needs some improvements with type clarification but it can break some things.

我看着你们6月5号发了最后一个版本，6月6号改了d.ts，没有发版本？

Browser sync injects a extra blur(); focus(); to checkboxes and radios at the addEventListener level.
Resulting in the following sequence of events:

<Checkbox 
  checked={false}
  onBlur={e => console.log("blur", e.target.checked)}
  onFocus={e => console.log("focus", e.target.checked)}
  onChange={e => console.log("focus", e.target.checked)}
/>

- focus,  false
- blur,   true (added by browsersync)
- focus,  false (added by browsersync)
- change, false

When the onChange is called the e.target.chacked is no longer trueand thus the checkbox never toggles its state.

This only fails in 1.3.4 since the addition of onBlur and onFocus that change the component state.
If I comment out the setState lines from onBlur and onFocus it works correctly (albeit isFocused support is lost ofc)

Issue

The props that have default values, are not used in the event.target from onChange

v2.3.2 functionality

In v2.3.2 the props were defaulted via defaultProps;

Which meant that in the onChange target would use these defaulted props;

v3.0.0 functionality

However in v3.0.0, the props are only defaulted in the destructuring;

Summary

in v2.3.2; <Checkbox onChange={(e) => console.log(e.target.type)} {...otherProps} />; will log "checkbox"
in v3.0.0; <Checkbox onChange={(e) => console.log(e.target.type)} {...otherProps} />; will log undefined

project: https://github.com/orgs/react-component/projects/1/views/1

How can I change the default blue color? I don't see this documented anywhere.

examples/simple.js:

<Checkbox
  checked
  onChange={onChange}
  disabled={this.state.disabled}
/>

The "checked" props will cause the checkbox component can not response to the click event,
in the Checkbox.jsx source code below:

handleChange(e) {
  const checked = e.target.checked;
  if (!('checked' in this.props)) {
    this.setState({
    checked: checked ? 1 : 0,
    });
}

"checked" should be "defaultChecked".

Hello,

We have tried to upgrade to the latest version. Unfortunately, our builds are crashing as the type declarations are no longer present in the package. Could you please provide them back?

Thank you for the library and its maintenance.

http://react-component.github.io/checkbox/examples/simple.html 有报错

I have a list of checkboxes, is it possible to use the event on a button to select them all?

Thank you.

https://github.com/radubrehar/react-checkbox#props

• Synthetic events are a superset of Native events and IMO Synthetic events should be preferred.
• Users wanting to use native events can always choose event.nativeEvent
• This code is suppressing both synthetic & native event object, which means event.datasets or event.nativeEvent.target.dataset can't be used anymore.
• This takes away the ability to access other DOM APIs even.

this.props.onChange({
      target: {
        ...this.props,
        checked: e.target.checked,
      },
      stopPropagation() {
        e.stopPropagation();
      },
      preventDefault() {
        e.preventDefault();
      },
    });