0

我刚开始学习 React Native 技术，所以我尝试在教程代码中更改一些行。这是一个添加新标题的表单，但如果 value === ""，我想更改按钮的颜色。我试图找到，但大多数示例使用类，在这个项目中我想使用函数

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

2 回答 2

0

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

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

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

red: {
  backgroundColor: 'red'
}

像这样的东西。

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

style={[styles.input, value === '' && isSubmitted ? styles.red : null]}
于 2020-02-23T19:59:25.103 回答
0

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

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

希望这对您有所帮助。随意怀疑。

于 2020-02-23T14:55:05.850 回答