React native - выделение TextInput, если оно пусто при отправке формы. - PullRequest
Новая
       12

React native - выделение TextInput, если оно пусто при отправке формы.

1 голос
/ 04 июня 2019

У меня есть куча TextInput полей, и при отправке формы я хотел бы выделить те, которые оставлены пустыми или имеют недопустимое содержимое. (используя границу)

Каков хороший подход для обработки этого с минимальным кодом?

наличие состояния для "isEmpty", которое обновляется при отправке и условном рендеринге CSS для каждого из них, кажется немного излишним, поскольку полей довольно много.

Есть ли способ получить TextInput по ID или name и динамически обновлять или добавлять правила CSS таким образом в React Native

Ответы [ 3 ]

2 голосов
/ 04 июня 2019

Личное предложение:

1 - добавить состояние errors: []

2 - при отправке, проверьте значения required и заполните errors пользовательскими данными; пример: 

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

  if (firstName === ''){
    errors << 'firstName'
  }

  if (lastName === ''){
    errors << 'lastName'
  }

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

  // API CALL
}

3 - в вашей функции рендеринга добавьте пользовательский класс для TextInput s 

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

Теперь, конечно, я бы предложил перенести стили в классы и использовать классы, но этот пример является хорошим способом для их реализации.

EDIT

Я забыл упомянуть, что вам нужно setState({ errors: [] }) при редактировании любого значения в текстовом поле, чтобы сбросить границы на ноль.

0 голосов
/ 04 июня 2019

Вы можете использовать таблицы стилей для определения стилей. Затем измените стили в зависимости от значения ввода. 

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,
    },
});
0 голосов
/ 04 июня 2019

Вы можете сделать это, используя Прямое прямое манипулирование 

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})} />
...