Как я могу отключить и включить кнопку на основе пользовательского ввода в компоненте textinput?

Question

Я хочу отключить и включить кнопку на основе ввода пользователя. Если какое-либо поле пусто, кнопка должна быть отключена, и если все поля заполнены. Тогда кнопка будет включена в реагировать на родную.

Answer 1

Код:

  onChangeText(text){
    if (text.length == 0){
      // disable button
      this.setState({disabled: true})
    } else {
      // enable button
      this.setState({disabled: false})
    }
    this.setState({value: text})
  }

рендер:

       <TextInput 
          value={this.state.value}
          style={{backgroundColor: 'gray'}}
          onChangeText={(text) => this.onChangeText(text)}
        />

        <TouchableOpacity disabled={this.state.disabled} style={{backgroundColor: this.state.disabled ? 'red': 'green'}} >
        <Text> Button </Text>
        </TouchableOpacity>

Рабочий пример

https://snack.expo.io/S1y7Pr8BI

Answer 2

См. Пример ниже, надеюсь, это поможет вам.

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

class App extends Component {
  state = {
    name: '',
  };

  onChangeName = value => {
    this.setState({
      name: value,
    });
  };

  checkUserDetails = () => {
    //
  };

  render() {
    const { name} = this.state;
    const { scrollview, inputStyle } = styles;

    return (
      <View style={styles.scrollview}>
        <View style={{ width: '90%', alignSelf: 'center' }}>
          <TextInput
            style={inputStyle}
            placeholder={` name`}
            placeholderTextColor={'#ED3C20'}
            onChangeText={this.onChangeName}
            value={name}
          />
          <Button
            disabled={!this.state.name ? true : false}
            title="submit"
            buttonHandler={this.checkUserDetails}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollview: {
    flex: 1,
    justifyContent: 'center',
  },
  inputStyle: {
    height: 45,
    borderWidth: 2,
    borderColor: 'gray',
    marginBottom: 5,
    textAlign: 'auto',
  },
});

export default App;

Не стесняйтесь сомнений.

Answer 3

использовать состояние для обработки этого ... вот пример

import * as React from 'react';
import { Text, View, StyleSheet, Button, TextInput } from 'react-native';
import Constants from 'expo-constants';
export default () => {
  const [email, setEmail] = React.useState('');
  console.log(email)
  return (
    <View style={styles.container}>
      <TextInput placeholder="enter" onChangeText={setEmail} />
      <Button
        disabled={email ? false : true}
        title="Button"
        onPress={() => {
          console.log('sdasds')
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});