From 8a19cee2c68164b379fed6ce154b238eb367a3b4 Mon Sep 17 00:00:00 2001 From: liuchao233 <15609831969@163.com> Date: Tue, 17 Nov 2020 22:37:45 +0800 Subject: [PATCH 1/3] add checkbox key events --- examples/simple.jsx | 42 +++++++++++++++++++++++------------------- src/index.jsx | 15 ++++++++++++--- 2 files changed, 35 insertions(+), 22 deletions(-) diff --git a/examples/simple.jsx b/examples/simple.jsx index 657c611..ed414a7 100644 --- a/examples/simple.jsx +++ b/examples/simple.jsx @@ -4,7 +4,19 @@ import Checkbox from '../src'; import '../assets/index.less'; function onChange(e) { - console.log('Checkbox checked:', (e.target.checked)); + console.log('Checkbox checked:', e.target.checked); +} + +function onKeyDown(e) { + console.log('Checkbox key down:', e.key); +} + +function onKeyPress(e) { + console.log('Checkbox key press:', e.key); +} + +function onKeyUp(e) { + console.log('Checkbox key up:', e.key); } export default class SimpleDemo extends React.Component { @@ -16,7 +28,7 @@ export default class SimpleDemo extends React.Component { this.setState(state => ({ disabled: !state.disabled, })); - } + }; render() { return ( @@ -24,23 +36,14 @@ export default class SimpleDemo extends React.Component {

  

   @@ -50,11 +53,7 @@ export default class SimpleDemo extends React.Component {

   @@ -93,6 +92,9 @@ export default class SimpleDemo extends React.Component { type="checkbox" defaultChecked onChange={onChange} + onKeyDown={onKeyDown} + onKeyPress={onKeyPress} + onKeyUp={onKeyUp} disabled={this.state.disabled} />   defaultChecked native with name @@ -101,7 +103,9 @@ export default class SimpleDemo extends React.Component {

- +
); } diff --git a/src/index.jsx b/src/index.jsx index 038865f..4595968 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -12,6 +12,9 @@ class Checkbox extends Component { onFocus() {}, onBlur() {}, onChange() {}, + onKeyDown() {}, + onKeyPress() {}, + onKeyUp() {}, }; constructor(props) { @@ -42,7 +45,7 @@ class Checkbox extends Component { this.input.blur(); } - handleChange = (e) => { + handleChange = e => { const { disabled, onChange } = this.props; if (disabled) { return; @@ -69,9 +72,9 @@ class Checkbox extends Component { } }; - saveInput = (node) => { + saveInput = node => { this.input = node; - } + }; render() { const { @@ -87,6 +90,9 @@ class Checkbox extends Component { onClick, onFocus, onBlur, + onKeyDown, + onKeyPress, + onKeyUp, autoFocus, value, required, @@ -122,6 +128,9 @@ class Checkbox extends Component { onClick={onClick} onFocus={onFocus} onBlur={onBlur} + onKeyUp={onKeyUp} + onKeyDown={onKeyDown} + onKeyPress={onKeyPress} onChange={this.handleChange} autoFocus={autoFocus} ref={this.saveInput} From aeeeaad23851bc780196add815243a0103da872f Mon Sep 17 00:00:00 2001 From: liuchao233 <15609831969@163.com> Date: Wed, 18 Nov 2020 20:26:19 +0800 Subject: [PATCH 2/3] add key event tests and demo --- examples/simple.jsx | 29 ++++++++++++++++++++++++++++- tests/index.test.jsx | 36 ++++++++++++++++++++++++++++++++++-- 2 files changed, 62 insertions(+), 3 deletions(-) diff --git a/examples/simple.jsx b/examples/simple.jsx index ed414a7..92f4b1b 100644 --- a/examples/simple.jsx +++ b/examples/simple.jsx @@ -91,13 +91,40 @@ export default class SimpleDemo extends React.Component { name="my-checkbox" type="checkbox" defaultChecked + onChange={onChange} + disabled={this.state.disabled} + /> +   defaultChecked native with name + +    +

+ + +
+

+ +    +

+

+   

diff --git a/tests/index.test.jsx b/tests/index.test.jsx index 64cee29..76e53f2 100644 --- a/tests/index.test.jsx +++ b/tests/index.test.jsx @@ -34,8 +34,13 @@ describe('rc-checkbox', () => { const onChange = jest.fn(); const wrapper = mount(
- { e.stopPropagation(); e.preventDefault(); }} /> -
+ { + e.stopPropagation(); + e.preventDefault(); + }} + /> +
, ); wrapper.find('input').simulate('change', { target: { checked: true } }); expect(onChange).not.toHaveBeenCalled(); @@ -122,4 +127,31 @@ describe('rc-checkbox', () => { const renderedInput = wrapper.find('input').getDOMNode(); expect(renderedInput.hasAttribute('required')).toBe(true); }); + + it('onKeyDown', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + const onKeyDown = jest.fn(); + const wrapper = mount(, { attachTo: container }); + wrapper.find('input').simulate('keydown'); + expect(onKeyDown).toBeCalled(); + }); + + it('onKeyPress', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + const onKeyPress = jest.fn(); + const wrapper = mount(, { attachTo: container }); + wrapper.find('input').simulate('keypress'); + expect(onKeyPress).toBeCalled(); + }); + + it('onKeyUp', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + const onKeyUp = jest.fn(); + const wrapper = mount(, { attachTo: container }); + wrapper.find('input').simulate('keyup'); + expect(onKeyUp).toBeCalled(); + }); }); From e442191bf6bcd7e36c5befbd0c7463e0b9c370d0 Mon Sep 17 00:00:00 2001 From: liuchao233 <15609831969@163.com> Date: Sat, 21 Nov 2020 15:15:44 +0800 Subject: [PATCH 3/3] add keyboard events default handler test --- tests/index.test.jsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/tests/index.test.jsx b/tests/index.test.jsx index 76e53f2..a318c3f 100644 --- a/tests/index.test.jsx +++ b/tests/index.test.jsx @@ -154,4 +154,22 @@ describe('rc-checkbox', () => { wrapper.find('input').simulate('keyup'); expect(onKeyUp).toBeCalled(); }); + + it('has default keyboard events handler', () => { + const onKeyDown = jest.fn(); + const onKeyPress = jest.fn(); + const onKeyUp = jest.fn(); + + const wrapper = mount( +
+ +
, + ); + wrapper.find('input').simulate('keydown'); + expect(onKeyDown).toBeCalled(); + wrapper.find('input').simulate('keypress'); + expect(onKeyPress).toBeCalled(); + wrapper.find('input').simulate('keyup'); + expect(onKeyUp).toBeCalled(); + }); });