使用 onPress 在 textinput 为 null 时更改按钮颜色

Question

我刚开始学习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'
  }
})

Answer 1

您可以应用如下简单的逻辑

<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',
  }
});

希望对您有所帮助。有疑问欢迎留言。

Answer 2

您使用受控输入字段。您将值存储在您的状态中，然后使用输入字段更改它。下一步是根据您当前的状态为您的按钮设置样式。

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

在这种情况下，您需要添加一个名为 "red" 的样式来更改按钮颜色。

red: {
  backgroundColor: 'red'
}

像这样。

因为每次更改输入值时您的状态都会更新，所以它会在更改时更新。如果你想在提交时设置它，你需要在你的状态中添加一个 isSubmitted 布尔值（默认为 false ）并在你的 pressHandler 中将它设置为 true 。你需要在这个例子中解构 isSubmitted:

style={[styles.input, value === '' && isSubmitted ? styles.red : null]}

使用 onPress 在 textinput 为 null 时更改按钮颜色

Change a button color when textinput is null, by using onPress

react-native

button

colors

styles

onpress