React Native TextInput无法重置输入值问题求助

问题现象 #

实现带清除（Cancel）按钮的搜索输入框时，首次点击Cancel按钮仅能让输入框失焦，无法清除输入内容；再次聚焦后点击Cancel则可正常清除。

问题根源 #

1. 初始状态未赋值：useState()未设置初始值，导致input初始为undefined，此时TextInput的value为undefined，组件处于半受控状态，状态更新与原生输入框行为出现冲突。
2. 冗余的ref操作：同时调用setInput('')（更新React状态）和inputRef.current.clear()（操作原生输入框），两者执行时机不一致，导致首次点击时状态更新未同步到原生输入框。
3. 失焦操作时机过早：在状态未完成更新时就调用blur()，组件还未重新渲染，导致输入框内容未及时清空。

解决方案 #

1. 给状态设置初始空值：将useState()改为useState('')，确保TextInput始终处于受控状态。
2. 移除冗余的ref清除操作：受控组件的内容由React状态驱动，只需更新input状态即可清空输入框，无需调用原生的clear()方法。
3. 调整操作顺序：确保状态更新优先于失焦操作，避免组件未渲染完成就失焦。

修改后的完整代码 #

SearchView组件

const SearchView = () => {
  // 给input设置初始空值
  const [input, setInput] = useState('');
  const [searching, setSearching] = useState(false);

  const inputRef = useRef();

  return (
    <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center' }}>
        <View style={{ flex: 1 }}>
          <Input
            textInputConfig={{
              onFocus: () => {
                setSearching(true);
              },
              onChangeText: setInput,
              placeholderTextColor: colors.backgroundActive,
              placeholder: 'Search...',
              value: input,
              ref: inputRef,
            }}
          />
        </View>
        {searching ? (
          <Text
            style={[globalStyles.textBody, { marginLeft: 12 }]}
            onPress={() => {
              // 先更新状态清空输入
              setInput('');
              setSearching(false);
              // 再执行失焦
              inputRef.current?.blur();
            }}
          >
            Cancel
          </Text>
        ) : undefined}
      </View>
  )
}

Input组件（无需修改）

const Input = ({label, textInputConfig, labelStyle, inputStyle, invalid, alignment}) => (
    <>
      {label ? <Text style={[globalStyles.textBody,styles.label, labelStyle]}>{label}</Text> : undefined}
      <TextInput style={[globalStyles.textBody,styles.input, inputStyle, invalid ? {borderColor: 'darkred'} : undefined, alignment ? {textAlign: alignment} : {textAlign: 'left'}]} {...textInputConfig}/>
    </>
  );

原理说明 #

当TextInput的value绑定到React状态时，组件变为受控组件，所有输入内容的变更都由状态驱动。此时只需更新状态值，React会自动同步到TextInput的显示内容，无需直接操作原生组件。初始状态设为空字符串后，组件从一开始就处于受控状态，避免了undefined带来的状态不一致问题。

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