react-native - 如果文本输入为空字符串，则在设备上反应本机禁用提交键盘

Question

像标题一样，如果文本输入为空字符串，我想禁用设备键盘上的提交按钮（搜索）。我创建了一个搜索栏并使用了 TextInput。

我怎样才能做到这一点？

标签： react-native

Answer 1

你应该有 2 个状态（textSearch 和 buttonStatus）并检查每onChangeText一个TextInput道具

这是我使用过的简单代码：

import React, {Component} from 'react';
import RN, {View, StyleSheet, Text} from 'react-native';

export default class History extends Component {

  constructor(props) {
    super(props);
    this.state={
      search:null,
      disabledButton:true
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <RN.TextInput
          value={this.state.search}
          onChangeText={(e)=>{
            this.setState({search:e, disabledButton:e==""?true:false})
          }}
        />
        <RN.Button
          title="Search"
          disabled={this.state.disabledButton}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{flex:1, justifyContent:'center', alignItems:'center'}
})