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

【问题标题】：React native - Highlight a TextInput if it's empty on form submitReact native - 如果表单提交时为空，则突出显示 TextInput
【发布时间】：2019-10-19 22:45:15
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css reactjs react-native jsx textinput

【解决方案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,
    },
});

【讨论】：