Измените цвет кнопки, когда textinput является нулем, используя onPress - PullRequest
Новая
       83

Измените цвет кнопки, когда textinput является нулем, используя onPress

0 голосов
/ 23 февраля 2020

Я только начал изучать технологию React Native, поэтому я пытаюсь изменить некоторые строки в учебном коде. Это форма, которая добавляет новый заголовок, но я хочу изменить цвет кнопки, если значение === "". Я пытаюсь найти, но в основном примеры используют классы, в этом проекте я хочу использовать функции 

import React, { useState } from 'react'
import { View, StyleSheet, TextInput, Button, Alert } from 'react-native'

export const AddTodo = ({ onSubmit }) => {
  const [value, setValue] = useState('')

  const pressHandler = () => {
    if (value.trim()) {
      onSubmit(value)
      setValue('')
    } else {

      }
    }


  return (
    <View style={styles.block}>
      <TextInput
        style={styles.input}
        onChangeText={setValue}
        value={value}
        disabled
        placeholder='Введите название дела...'
        autoCorrect={false}
        autoCapitalize='none'
      />
      <Button title='Добавить' onPress={pressHandler} /> 
    </View>
  )
}

const styles = StyleSheet.create({
  block: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15
  },
  input: {
    width: '70%',
    padding: 10,
    borderStyle: 'solid',
    borderBottomWidth: 2,
    borderBottomColor: '#3949ab'
  },
  button: {
    color: 'red'
  }
})

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020

Вы используете контролируемое поле ввода. Вы сохраняете значение в своем состоянии и изменяете его в поле ввода. Следующим шагом будет установка стиля для вашей кнопки в зависимости от вашего текущего состояния. 

<TextInput
    style={[styles.input, value === '' ? styles.red : null]}
    onChangeText={setValue}
    value={value}
    disabled
    placeholder='Введите название дела...'
    autoCorrect={false}
    autoCapitalize='none'
  />

В этом случае вам нужно добавить стиль под названием «красный», который меняет цвет кнопки. 

red: {
  backgroundColor: 'red'
}

Как то так.

Поскольку ваше состояние обновляется каждый раз, когда вы меняете входное значение, оно обновляется в onChange. Если вы хотите установить его при отправке, вам нужно добавить логическое значение isSubmitted (по умолчанию false) в ваше состояние и установить значение true в вашем pressHandler. Вам нужно деструктурировать isSubmitted в этом примере: 

style={[styles.input, value === '' && isSubmitted ? styles.red : null]}
0 голосов
/ 23 февраля 2020

Вы можете применить простой лог c, как показано ниже 

<Button
    title="Добавить"
    onPress={pressHandler}
    color={value === null ? 'red' : 'green'}
/>

РЕДАКТИРОВАТЬ

Проверьте ниже образец, который я создал в соответствии с вашим требованием 

import React, { useState } from 'react';
import { View, StyleSheet, TextInput, Button } from 'react-native';

export default App = () => {
  const [value, setValue] = useState('');
  const [error, handleError] = useState(false);

  const pressHandler = () => {
    if (value.trim()) {
      setValue('');
    } else {
      handleError(true);
    }
  };

  const onHandleChange = (text) => {
    setValue(text)
    handleError(false)
  }

  return (
    <View style={styles.block}>
      <TextInput
        style={styles.input}
        onChangeText={onHandleChange}
        value={value}
        placeholder="Введите название дела..."
        autoCorrect={false}
        autoCapitalize="none"
      />
      <Button
        title="Добавить"
        onPress={pressHandler}
        color={error ? 'red' : 'green'}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  block: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  input: {
    width: '70%',
    padding: 10,
    borderStyle: 'solid',
    borderBottomWidth: 2,
    borderBottomColor: '#3949ab',
  }
});

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...