React Native表单提交时键盘事件处理需求：点击提交按钮同步关闭键盘并提交表单

这个问题我之前也碰到过！主要有两个关键点需要调整：一是你代码里的Button组件命名冲突，二是需要在提交时手动触发键盘关闭，这样就能保证点击一次按钮就完成键盘收起+表单提交的操作。

问题分析 #

1. 你同时从react-native和native-base导入了Button组件，这会导致组件命名冲突，按钮的点击事件可能无法正常触发；
2. 默认情况下，点击按钮时输入框失焦会触发键盘关闭，但这个过程可能会干扰提交事件的执行，所以需要我们主动控制键盘的关闭时机。

修改后的完整代码 #

import React, { Component } from "react";
import { View, Text, Keyboard, KeyboardAvoidingView } from "react-native";
import { Button, Input } from "native-base"; // 只保留native-base的Button，避免冲突

export default class TestForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    };
  }

  handleSignupChange = (data, text) => {
    this.setState({ [data]: text });
  };

  submitForm = () => {
    // 先手动关闭键盘
    Keyboard.dismiss();
    const { email, password } = this.state;
    console.log('form value', email, password);
    // 这里可以添加你的表单提交逻辑，比如接口请求等
  };

  render() {
    return (
      <KeyboardAvoidingView enabled={true} style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
        <Text> TestForm </Text>
        <Input 
          onChangeText={(e) => this.handleSignupChange("email", e)} 
          placeholder="email" 
          style={{ marginVertical: 10 }}
        />
        <Input 
          onChangeText={(e) => this.handleSignupChange("password", e)} 
          placeholder="password" 
          secureTextEntry
          style={{ marginVertical: 10 }}
        />
        {/* 给Button添加显示文本，确保可点击区域正常 */}
        <Button onPress={this.submitForm} style={{ marginTop: 20 }}>
          <Text style={{ color: 'white' }}>提交</Text>
        </Button>
      </KeyboardAvoidingView>
    );
  }
}

关键修改点 #

• 移除冲突的Button导入：只保留native-base的Button组件，避免命名冲突导致点击事件异常；
• 手动关闭键盘：在submitForm函数开头调用Keyboard.dismiss()，主动触发键盘关闭，同时不影响后续的表单提交逻辑；
• 完善Button组件：给Button添加文本内容和基础样式，确保按钮的可点击区域和显示正常（原代码里的Button没有子元素，可能导致渲染异常）；
• 优化KeyboardAvoidingView样式：添加flex布局和内边距，让表单布局更合理。

这样修改后，点击提交按钮时，键盘会立即收起，同时表单的提交逻辑也会一次性执行完成，不需要再点击第二次啦！

内容的提问来源于stack exchange，提问作者vjtechno