将函数传递给ReactNative中的TextInput defaultValue

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';

const DynamicDefaultValueExample = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 动态设置初始值的函数
  const getInitialValue = () => {
    return isLoggedIn ? 'Welcome back!' : 'Please sign in';
  };

  return (
    <View>
      <Text>Are you logged in? {isLoggedIn ? 'Yes' : 'No'}</Text>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        defaultValue={getInitialValue()} // 使用函数返回动态初始值
      />
      <button title="Toggle Login" onPress={() => setIsLoggedIn(!isLoggedIn)} />
    </View>
  );
};

export default DynamicDefaultValueExample;

import React, { useState, useMemo } from 'react';
import { TextInput, View, Text } from 'react-native';

const DynamicDefaultValueExample = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 使用useMemo缓存函数结果
  const getInitialValue = useMemo(() => {
    return () => {
      return isLoggedIn ? 'Welcome back!' : 'Please sign in';
    };
  }, [isLoggedIn]);

  return (
    <View>
      <Text>Are you logged in? {isLoggedIn ? 'Yes' : 'No'}</Text>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        defaultValue={getInitialValue()} // 使用缓存的函数返回动态初始值
      />
      <button title="Toggle Login" onPress={() => setIsLoggedIn(!isLoggedIn)} />
    </View>
  );
};

export default DynamicDefaultValueExample;