mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-05-11 02:30:41 +08:00
Implement onKeyPress Android
Summary: This implements onKeyPress for Android on TextInputs and addresses https://github.com/facebook/react-native/issues/1882. **N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs. I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :). I think important to test this on the most popular keyboard types; maybe different languages too. I have not yet added tests to test implementation, but will be happy to do that also. - Build & run RNTester project for Android and open TextInput. - Enter keys into 'event handling' TextInput. - Verify that keys you enter appear in onKeyPress below the text input - Test with autocorrect off, on same input and validate that results are the same. Below is a gif of PR in action.  Closes https://github.com/facebook/react-native/pull/14720 Differential Revision: D6661592 Pulled By: hramos fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
This commit is contained in:
committed by
Facebook Github Bot
parent
ddd65f1ba9
commit
c9ff0bc212
@@ -27,6 +27,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
|
||||
curText: '<No Event>',
|
||||
prevText: '<No Event>',
|
||||
prev2Text: '<No Event>',
|
||||
prev3Text: '<No Event>',
|
||||
};
|
||||
|
||||
updateText = (text) => {
|
||||
@@ -35,6 +36,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
|
||||
curText: text,
|
||||
prevText: state.curText,
|
||||
prev2Text: state.prevText,
|
||||
prev3Text: state.prev2Text,
|
||||
};
|
||||
});
|
||||
};
|
||||
@@ -46,6 +48,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
|
||||
autoCapitalize="none"
|
||||
placeholder="Enter text to see events"
|
||||
autoCorrect={false}
|
||||
multiline
|
||||
onFocus={() => this.updateText('onFocus')}
|
||||
onBlur={() => this.updateText('onBlur')}
|
||||
onChange={(event) => this.updateText(
|
||||
@@ -60,12 +63,16 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
|
||||
onSubmitEditing={(event) => this.updateText(
|
||||
'onSubmitEditing text: ' + event.nativeEvent.text
|
||||
)}
|
||||
onKeyPress={(event) => this.updateText(
|
||||
'onKeyPress key: ' + event.nativeEvent.key
|
||||
)}
|
||||
style={styles.singleLine}
|
||||
/>
|
||||
<Text style={styles.eventLabel}>
|
||||
{this.state.curText}{'\n'}
|
||||
(prev: {this.state.prevText}){'\n'}
|
||||
(prev2: {this.state.prev2Text})
|
||||
(prev2: {this.state.prev2Text}){'\n'}
|
||||
(prev3: {this.state.prev3Text})
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user