React Native中TextInput为空点击按钮时如何在下方显示错误提示

你当前代码存在类型不一致问题：给inputValue的初始值设为空字符串，但在onChangeText回调中存储的是{oved: text}对象，会导致初始状态下访问inputValue.oved报错，且TextInput绑定的value为对象会触发渲染警告，可同步修复该问题后实现需求，实现步骤如下：

1. 调整状态定义 #

新增错误提示状态，同时修正inputValue的初始值类型：

// 修正inputValue初始值为对象，新增错误信息状态
const [inputValue, setInputValue] = useState({ oved: "" });
const [errorMsg, setErrorMsg] = useState("");

2. 调整TextInput组件逻辑 #

• 修正value绑定为inputValue.oved
• 输入时自动清空错误提示
• 下方新增错误提示展示区域

<TextInput
  style={[
    styles.input,
    { borderColor: errorMsg || !inputValue.oved ? "red" : "#006d41" },
  ]}
  onChangeText={(text) => {
    setInputValue({ oved: text });
    // 输入时清空错误提示
    setErrorMsg("");
  }}
  value={inputValue.oved}
  placeholder="Enter Employee ID"
  keyboardType="numeric"
  error={errorStatus || !!errorMsg}
/>
{/* 错误提示，仅存在错误信息时渲染 */}
{errorMsg ? <Text style={styles.errorText}>{errorMsg}</Text> : null}

需要给错误提示新增对应样式，示例如下：

const styles = StyleSheet.create({
  // 原有其他样式保留
  errorText: {
    color: "red",
    fontSize: 12,
    marginTop: 4,
    paddingHorizontal: 8
  }
})

3. 跳转逻辑新增非空校验 #

在跳转方法最开头加校验，输入为空时设置错误提示，终止后续逻辑执行：

const goToLoadingScreen = (item) => {
  // 新增非空校验
  if (!inputValue.oved.trim()) {
    setErrorMsg("请提供员工ID");
    return;
  }
  dispatch(changeCompany(item.toString(), inputValue.oved));
  props.navigation.navigate("LoadingScreen", { screen: LOADING_SCREEN });
};

内容的提问来源于stack exchange，提问作者Ashish good luck chuck