如何根据 textinput 组件中的用户输入禁用和启用按钮？

Question

我想根据用户输入禁用和启用按钮。如果任何字段为空，则必须禁用按钮，如果所有字段都已填满。然后按钮将在 react-native 中启用。

Answer 1

使用状态来处理这个...这是一个例子

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

Answer 2

代码：

  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 3

请参阅下面的示例，希望对您有所帮助。

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;

有疑问欢迎留言。

如何根据 textinput 组件中的用户输入禁用和启用按钮？

How I can disable and enable button based on user input in textinput component?

validation

react-native

react-native-android