Question

我有一个关于虚拟键盘的问题，并在Android上提交表单。我有一个react-redux表单，我希望它在用户在键入后点击Enter键时提交。但虚拟键盘只有这样的按钮

（带刻度图标）

击中哪个键盘只是隐藏而没有提交。在某些应用程序中，我看到了这样的按钮

（带箭头按钮）

按下哪个提交事件发生后。在Web表单中输入密钥默认提交表单，但在移动设备中不提供。我需要做些什么来使虚拟键盘具有这样的＆＃34;提交＆＃34;按钮，而不是＆＃39; OK＆＃39;按钮？

以下是代码：

class SearchBenefitsForm extends React.Component<IProps> {
 renderTextInput = ({ input, autoFocus }: { input: any, autoFocus: boolean }) => {
 return (
   <TextInput
     {...input}
     autoFocus={autoFocus}
     underlineColorAndroid="transparent"
   />
 );
 }

 render() {
 const {
   handleSubmit,
   submitting,
   invalid,
   onCancel,
 } = this.props;

 return (
   <View style={styles.container}>
     <TouchableOpacity onPress={handleSubmit} disabled={submitting || invalid}>
       <Image style={styles.searchIcon} source={searchIcon}/>
     </TouchableOpacity>
     <View style={styles.searchExpression}>
       <Field
         name={SEARCH_BENEFITS_EXPRESSION}
         autoFocus={true}
         component={this.renderTextInput}
       />
     </View>
     <TouchableOpacity onPress={onCancel} disabled={submitting || invalid}>
       <Image style={styles.closeIcon} source={closeIcon}/>
     </TouchableOpacity>
   </View>
     );
   }
}

export default reduxForm({
  form: SEARCH_BENEFITS_FORM,
})(SearchBenefitsForm);

Answer 1

看起来你没有在Textinput道具中设置keyboardType。第二个屏幕截图看起来像keyboardType =＆＃34; email＆＃34;。 More information here.

您的TextInput应如下所示：

<TextInput
    value="..."
    keyboardType="email"
/>

Answer 2

感谢您的建议，onSubmitEditing是解决此问题的正确方法。

以下是代码：

class SearchBenefitsForm extends React.Component<IProps> {
 renderTextInput = ({ input, autoFocus, onSubmitEditing }: { input: any,
                  autoFocus: boolean, onSubmitEditing: Function }) => 
 {
 return (
   <TextInput
     {...input}
     autoFocus={autoFocus}
     underlineColorAndroid="transparent"
     onSubmitEditing={onSubmitEditing}
   />
 );
 }

 render() {
 const {
   handleSubmit,
   submitting,
   invalid,
   onCancel,
 } = this.props;

 return (
   <View style={styles.container}>
     <TouchableOpacity onPress={handleSubmit} disabled={submitting || invalid}>
       <Image style={styles.searchIcon} source={searchIcon}/>
     </TouchableOpacity>
     <View style={styles.searchExpression}>
       <Field
         name={SEARCH_BENEFITS_EXPRESSION}
         autoFocus={true}
         component={this.renderTextInput}
         onSubmitEditing={handleSubmit}
       />
     </View>
     <TouchableOpacity onPress={onCancel} disabled={submitting || invalid}>
       <Image style={styles.closeIcon} source={closeIcon}/>
     </TouchableOpacity>
   </View>
     );
   }
}

export default reduxForm({
  form: SEARCH_BENEFITS_FORM,
})(SearchBenefitsForm);

如何通过按虚拟键盘上的Enter键在React Native中提交redux表单？

2 个答案: