React native - 如果表单提交时为空，则突出显示 TextInput

Posted 2023-02-21

【中文标题】React native - 如果表单提交时为空，则突出显示 TextInput

【英文标题】：React native - Highlight a TextInput if it's empty on form submit

【发布时间】：2019-10-19 22:45:15

【问题描述】：

我有一堆TextInput 字段，在提交表单时我想突出显示那些留空或包含无效内容的字段。 （使用边框）

什么是用最少的代码处理这个问题的好方法？

在提交时更新“isEmpty”的状态并有条件地为它们每个渲染 css 似乎有点矫枉过正，因为有很多字段。

有没有办法通过 ID 或 name 获取 TextInput 并在 React Native 中以这种方式动态更新或附加到 CSS 规则

【参考方案1】：

个人建议：

1- 添加状态errors: []

2- 在提交时，检查required 值并用自定义数据填充errors；示例：

onSubmit() 
  let errors = []
  let  firstName, lastName  = this.state

  if (firstName === '')
    errors.push('firstName')
  

  if (lastName === '')
    errors.push('lastName')
  

  if (errors.length)  
    this.setState( errors );
    return;
  

  // API CALL

3- 在您的渲染函数中，为您的TextInputs 添加一个自定义类

render()
  return (
    <TextInput style= borderColor: this.state.errors.include('firstName') ? 'red' : 'transparent'  />
  )

当然，我建议将样式移至类并使用类，但这个示例是实现它们的一个良好开端。

---

编辑

我忘了提到，当您编辑文本框中的任何值以将边框重置为空时，您需要 setState( errors: [] )。

【参考方案2】：

您可以使用 React-Native Direct Manipulation

来做到这一点

onSubmit()
   const firstName, lastName = this.state;
   if(firstName.trim().length == 0)
      this.firstNameInput.setNativeProps(
        borderColor:'red',
        borderWidth:1
      );
      return;
   

   if(lastName.trim().length == 0)
      this.lastNameInput.setNativeProps(
        borderColor:'red',
        borderWidth:1
      );
      return;
   

你的 textInput 看起来像

<TextInput ref=r=>this.firstNameInput=r onChangeText=(firstName)=>this.setState(firstName) />
<TextInput ref=r=>this.lastNameInput=r onChangeText=(lastName)=>this.setState(lastName) />

【参考方案3】：

您可以使用样式表来定义样式。然后根据输入的值修改样式。

import React from 'react';
import  StyleSheet, TextInput  from 'react-native';

class YourComponent extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            username: '',
        ;
    

    isInvalid = (input) => 
      'Check if input is empty or invalid and return true if it is and false if it is not.'
    

    handleUsernameInput = (input) => 
        this.setState(username:text);
        if(this.isInvalid(input)) 
            styles.usernameInput.borderColor = '#990000';
            styles.usernameInput.borderWidth = 1;
         else 
            if(styles.usernameInput.borderColor) 
                delete styles.usernameInput.borderColor;
                delete styles.usernameInput.borderWidth;
            
        
    

    render() 
        return(
            <View style=styles.container>
                <TextInput style=styles.usernameInput onChangeText=(event) => this.handleUsernameInput(event) value=this.state.username/>
            </View>
        );
    


export default YourComponent;

const styles = StyleSheet.create(
    container: 
        flex: 1,
    ,
    usernameInput: 
        fontSize: 16,
        padding: 15,
    ,
);