React onPress渲染时立即执行，改用箭头函数失效的问题排查

一、组件渲染时onPress立即执行的原因 #

当直接写onPress={addSubject(tempValue)}时，这是直接执行函数并将返回值传给onPress，而非传递函数引用。组件每次渲染时，这个表达式都会被求值，导致addSubject在渲染阶段就触发，而非按钮点击时。

二、改为箭头函数后点击无响应的原因 #

改成()=>{addSubject(tempValue)}后，点击无响应是因为闭包捕获了旧的state值：

• 组件首次渲染时tempValue为null，箭头函数捕获了这个初始值；
• 后续通过onSubmitEditing更新tempValue时，组件会重新渲染，但绑定在按钮上的旧箭头函数依然持有最初的null值，点击时调用addSubject(null)，自然看起来没有响应。

三、修复方案 #

方案1：用useRef跟踪最新值 #

使用useRef替代useState存储输入值，因为ref的current属性是可变的，不会被闭包捕获旧值：

import { useRef, View, Text, TextInput } from 'react';
import RoundedButton from './RoundedButton';

export const Focus = ({ addSubject }) => {
  const tempValueRef = useRef(null);

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}> What are you going to focus on....?</Text>
        <View style={styles.inputcontainer}>
          <TextInput
            style={{ flex: 1, marginRight: 10 }}
            onSubmitEditing={({ nativeEvent }) => {
              tempValueRef.current = nativeEvent.text + '0000';
            }}
          />
          <RoundedButton
            title='+'
            onPress={() => {
              if (tempValueRef.current) addSubject(tempValueRef.current);
            }}
          />
        </View>
      </View>
    </View>
  );
};

// 样式示例（原组件已有可忽略）
const styles = {
  container: { flex: 1, padding: 20 },
  titleContainer: { marginBottom: 20 },
  title: { fontSize: 18, fontWeight: 'bold' },
  inputcontainer: { flexDirection: 'row', alignItems: 'center' }
};

方案2：直接复用提交逻辑（无需状态存储） #

如果不需要保留输入值的状态，直接在回车和点击按钮时复用同一处理函数，同时给TextInput加ref获取当前值：

import { useRef, View, Text, TextInput } from 'react';
import RoundedButton from './RoundedButton';

export const Focus = ({ addSubject }) => {
  const textInputRef = useRef(null);

  const handleSubmit = (text) => {
    if (!text) return;
    const value = text + '0000';
    addSubject(value);
  };

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}> What are you going to focus on....?</Text>
        <View style={styles.inputcontainer}>
          <TextInput
            ref={textInputRef}
            style={{ flex: 1, marginRight: 10 }}
            onSubmitEditing={({ nativeEvent }) => {
              handleSubmit(nativeEvent.text);
            }}
          />
          <RoundedButton
            title='+'
            onPress={() => {
              handleSubmit(textInputRef.current?.value);
            }}
          />
        </View>
      </View>
    </View>
  );
};

方案3：useCallback结合useState（保留状态的同时捕获最新值） #

如果必须使用useState存储值，用useCallback包裹点击处理函数，将tempValue加入依赖数组，确保每次状态更新时函数能捕获最新值：

import { useState, useCallback, View, Text, TextInput } from 'react';
import RoundedButton from './RoundedButton';

export const Focus = ({ addSubject }) => {
  const [tempValue, setTempValue] = useState(null);

  const handleAdd = useCallback(() => {
    if (tempValue) addSubject(tempValue);
  }, [tempValue, addSubject]);

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}> What are you going to focus on....?</Text>
        <View style={styles.inputcontainer}>
          <TextInput
            style={{ flex: 1, marginRight: 10 }}
            onSubmitEditing={({ nativeEvent }) => {
              setTempValue(nativeEvent.text + '0000');
            }}
          />
          <RoundedButton title='+' onPress={handleAdd} />
        </View>
      </View>
    </View>
  );
};

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