React native 使用onPress在textinput为空时更改按钮颜色

我刚开始学习React原生技术，所以我尝试更改教程代码中的一些行。这是一个表单，它添加了新的标题，但我想在值为“”时更改按钮的颜色。我试图找到，但大多数例子都使用类，在这个项目中，我想使用函数

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

import React，{useState}来自“React”
从“react native”导入{视图、样式表、文本输入、按钮、警报}
export const AddTodo=（{onSubmit}）=>{
const[value，setValue]=useState（“”）
常量pressHandler=（）=>{
if（value.trim（））{
onSubmit（值）
设置值（“”）
}否则{
}
}
返回(
)
}
const styles=StyleSheet.create({
区块：{
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“居中”，
marginBottom:15
},
输入：{
宽度：“70%”，
填充：10，
边框样式：“实心”，
边界宽度：2，
borderBottomColor:“#3949ab”
},
按钮：{
颜色：“红色”
}
})

您可以应用以下简单逻辑

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

import React，{useState}来自“React”；
从“react native”导入{视图、样式表、文本输入、按钮}；
导出默认应用=（）=>{
const[value，setValue]=使用状态（“”）；
const[error，handleError]=useState（false）；
常量pressHandler=（）=>{
if（value.trim（））{
设置值（“”）；
}否则{
handleError（正确）；
}
};
const onHandleChange=（文本）=>{
设置值（文本）
handleError（错误）
}
返回(
);
};
const styles=StyleSheet.create({
区块：{
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“居中”，
marginBottom:15，
},
输入：{
宽度：“70%”，
填充：10，
边框样式：“实心”，
边界宽度：2，
borderBottomColor:“#3949ab”，
}
});

---

希望这对你有帮助。不要怀疑。

您可以使用受控输入字段。您将该值存储在您的状态中，并在更改输入字段时对其进行更改。下一步是根据当前状态为按钮设置样式

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

像这样的

因为您的状态在每次更改输入值时都会更新，所以它会在每次更改时更新。如果要在提交时设置，则需要在状态中添加isSubmitted布尔值（默认为false），并在pressHandler中将其设置为true。 您需要对本例中提交的ISSUBMITED进行分解：

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

---

谢谢，我只是换了红色和绿色，这很有效，但不是我的想法，但我喜欢这个decision@IlyaKraevoy如果你能描述一下你的问题。我也许能帮你。你很有同情心，所以我试着解释一下。我希望按钮只在功能on PRESS上更改颜色，而不是平均值。如果输入==''，我按下按钮，它必须改变颜色。换句话说，若输入并没有符号，在这种情况下，按钮会改变颜色。但你的previos代码非常好，当按钮在输入时改变颜色时，它很好moment@IlyaKraevoy你是成功地让它发挥作用了还是需要额外的帮助？你的建议现在已经足够了，现在我将把理论付诸实践，这是进一步理解国家原则的一步。谢谢谢谢你，也许我没有把我的问题解释清楚。我需要更改一个按钮，所以最后我决定做这个

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