React Native中点击按钮取值时btnSignup方法报错问题排查

你的代码存在几个核心问题，导致btnSignup功能异常，具体如下：

1. 输入框状态更新逻辑错误 #

handleChangeUsername和handleChangePassword没有接收onChangeText传递的输入文本参数，且更新状态时误用了当前的username/password变量（函数会捕获初始值，导致状态无法正确同步输入内容）。正确写法是直接接收输入参数并传给状态更新函数：

const handleChangeUsername = (text) => {
  setUsername(text)
}
const handleChangePassword = (text) => {
  setPassword(text)
}

更简洁的方式可以直接把状态更新函数传给onChangeText，省去中间函数：

<TextInput onChangeText={setUsername} value={username} />

2. 输入框未绑定value属性 #

你的TextInput没有将value绑定到对应的状态变量，这会导致输入框无法正确显示当前状态，甚至出现输入无响应的问题。必须添加value属性实现受控组件：

<TextInput 
  onChangeText={handleChangeUsername} 
  value={username}
  placeholder="Kullanıcı Adı"
/>
<TextInput 
  onChangeText={handleChangePassword} 
  value={password}
  placeholder="Password"
  secureTextEntry // 密码框隐藏输入内容
/>

3. 若启用Firebase注册，参数传递错误 #

如果要启用注释中的Firebase创建用户逻辑，你错误地传递了setUsername和setPassword（状态更新函数），而非当前的username和password状态值，正确写法是：

const btnSignup = () => {
  auth()
  .createUserWithEmailAndPassword(username, password) // 传入状态变量而非更新函数
  .then(() => {
    console.log('User account created & signed in!');
  })
  .catch(error => {
    // 新增错误捕获，方便排查问题
    console.error('注册失败:', error.message);
  })
}

完整修复后的代码 #

import { View, TextInput, Button } from 'react-native';
import { useState } from 'react';
// 若使用Firebase，需提前导入auth实例
// import { auth } from '../firebase/config';

const Signup = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const btnSignup = () => {
    // 先校验输入合法性
    if (!username.trim() || !password.trim()) {
      console.log('请输入完整的用户名和密码');
      return;
    }
    // auth()
    // .createUserWithEmailAndPassword(username, password)
    // .then(() => {
    //   console.log('User account created & signed in!');
    // })
    // .catch(error => {
    //   console.error('注册错误:', error.message);
    // })
    console.log('当前输入信息:', { username, password });
  }

  return (
    <View style={{ padding: 20, gap: 15 }}>
      <TextInput 
        onChangeText={setUsername}
        value={username}
        placeholder="Kullanıcı Adı"
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 6 }}
      />
      <TextInput 
        onChangeText={setPassword}
        value={password}
        placeholder="Password"
        secureTextEntry
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 6 }}
      />
      <Button onPress={btnSignup} title="TIKLA" />
    </View>
  )
}

export default Signup

额外建议：添加基础样式和输入校验，能提升用户体验和代码健壮性。

内容的提问来源于stack exchange，提问作者furkan aydınlı