提交文本输入时更改颜色按钮

Question

当文本输入为空时，我需要将按钮设置为灰色，一旦所有字段都已填写，请将其更改为蓝色。

login.tsx

从'React'导入React，{useState}；从'react native'导入{View、Text、TextInput、TouchableOpacity}；从'../../../infrastructure/components/buttons/button-outline primary/index'导入ButtonOutline；从'../../../infrastructure/components/buttons/button primary/index'导入ButtonPrimary；从“导入样式”/样式'；从'react hook form'导入{useForm，Controller}；

导出默认函数LogInComponent () {

const { register, setValue, handleSubmit, control, reset, formState: { errors } } = useForm();
const onSubmit = data => {
    console.log(data);
};



return (
        <View style={styles.container}>
            <View style={styles.boxTitle}>
                <Text>YPF - GAS</Text>
            </View>
            <View style={styles.boxForm}>
                <View style={styles.boxInput1}>
                    <Text style={styles.text}>Patente</Text>
                    <Controller
                    control={control}
                    render={({field: { onChange, onBlur, value }}) => (
                    <TextInput
                        style={styles.FormInput}
                        onBlur={onBlur}
                        onChangeText={value => onChange(value)}
                        value={value}
                    />
                    )}
                    name="patente"
                    rules={{required: true}}
                />
                </View>
                <View style={styles.boxInput}>
                    <Text style={styles.text}>Planta  </Text>
                    <Controller
                    control={control}
                    render={({field: { onChange, onBlur, value }}) => (
                    <TextInput 
                    style={styles.FormInput}
                    onBlur={onBlur}
                    onChangeText={value => onChange(value)}
                    value={value} 
                    />
                    )}
                    name="planta"
                    rules={{required: true}}
                />
                </View>
                <View style={styles.boxInput}>
                    <Text style={styles.text}>Usuario</Text>
                    <Controller
                    control={control}
                    render={({field: { onChange, onBlur, value }}) => (
                    <TextInput 
                    style={styles.UserFormInput}
                    onBlur={onBlur}
                    onChangeText={value => onChange(value)}
                    value={value}
                    />
                    )}
                    name="usuario"
                    rules={{required: true}}
                />
                </View>
                <View style={styles.boxButton}>
                    <ButtonOutline style={styles.button} title= 'Cerrar'></ButtonOutline>
                        <ButtonPrimary onPress={handleSubmit(onSubmit)} style={styles.button}  title= 'Ingresar'></ButtonPrimary>
                </View>
            </View>
        </View>
);

}

样式.tsx

从'react native'导入{StyleSheet}；从'../../../application/common/Colors'导入颜色；

导出默认样式表.create（{ 容器： { flex： 1， 背景颜色： 颜色表面 }， 框标题： { flex： 1， 填充： 5， 对齐项： “弹性开始”， 对齐内容： “中心”， 背景颜色： 颜色背景 }， 框格式： { flex： 9， 填充： 5 }， 框输入： { flex： 0， 对齐项： “居中”， 对齐内容： “居中”， 屈曲方向： “行”， 边距顶部： 30 }， 框输入1： { flex： 0， 对齐项： “中心”， 对齐内容： “中心”， 柔性指向： “行”， 边距顶部： 70 }， 表单输入： { 填充： 0， 行高： 24，字体大小： 20， 宽度： 168， 高度： 40， 背景颜色： 颜色背景， 边框半径： 4， 边框宽度： 2， 边框颜色： '#AAAAAA'， }， 用户窗体输入： { 填充： 0， 字体大小： 20， 行高： 24， 宽度： 168， 高度： 40， 背景颜色： 颜色表面， 边框半径： 4， 边框宽度： 2， 边框颜色： '#AAAAAA'， }， 文本： { 右： 60， 字体大小： 20， 行高： 24 }， 框按钮： { 顶部： 53， 柔性： 1， 柔行方向： '行'， justify内容： '周围空间' }， 按钮： { 宽度： 216， 高度： 40， 字体大小： 18， 行高： 22 }，

}）；

Answer 1

使用TouchableOpacity作为组件中的按钮

import React, {useState, useEffect} from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';

const ButtonColor = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [btnColor, setBtnColor] = useState(false);

  useEffect(() => {
    if (firstName !== '' && lastName !== '') {
      setBtnColor(true);
    } else {
      setBtnColor(false);
    }
  }, [lastName]);

  return (
    <View style={styles.container}>
      <View style={styles.secondContainer}>
        <View style={styles.formContainer}>
          <View style={styles.labelContainer}>
            <Text style={{color: '#000'}}>First Name</Text>
          </View>
          <View style={styles.textContainer}>
            <TextInput
              defaultValue={firstName}
              placeholder={'Type First Name'}
              onChangeText={val => setFirstName(val)}
            />
          </View>
        </View>
        <View style={styles.formContainer}>
          <View style={styles.labelContainer}>
            <Text style={{color: '#000'}}>Last Name</Text>
          </View>
          <View style={styles.textContainer}>
            <TextInput
              defaultValue={lastName}
              placeholder={'Type Last Name'}
              onChangeText={val => setLastName(val)}
            />
          </View>
        </View>
        <View style={styles.formContainer}>
          <TouchableOpacity
            style={
              btnColor
                ? styles.filledContainerButton
                : styles.normalContainerButton
            }>
            <Text style={styles.btnTextColor}>Button</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  secondContainer: {
    width: '85%',
    height: 300,
    marginTop: '40%',
    paddingHorizontal: 20,
    paddingVertical: 20,
    // alignItems: 'center',
    alignSelf: 'center',
    borderRadius: 5,
    borderWidth: 2,
    borderColor: 'black',
  },
  formContainer: {
    marginBottom: 20,
  },
  labelContainer: {
    marginBottom: 5,
  },
  textContainer: {
    borderWidth: 1,
    borderColor: '#d3d3d3',
    borderRadius: 3,
    height: 40,
  },
  normalContainerButton: {
    backgroundColor: '#808080',
    height: 40,
    width: '80%',
    alignSelf: 'center',
    // alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 9,
  },
  filledContainerButton: {
    backgroundColor: 'blue',
    height: 40,
    width: '80%',
    alignSelf: 'center',
    // alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 9,
  },
  btnTextColor: {
    color: '#fff',
  },
});

export default ButtonColor;