单击清除文本

Question

当我第一次点击十字图标时，它会降低键盘，第二次点击时，它会清除搜索栏中的文本。我想在第一次点击时清除文本我也尝试过其他解决方案，但没有任何效果。如何在第一次点击时清除文本？

    return (
      <View style={styles.FlatList_header}>
        <View style={styles.header_style}>
          <Input
            autoFocus={true}
            style={styles.textInputStyle}
            onChangeText={text => this.search(text)}
            value={this.state.text}
          />
          <Icon
            name="close"
            style={styles.crossIcon}
            onPress={() => {
              this.search('');
            }}
          />
        </View>
      </View>
    );
  };

  render() {
    const {data, onPress} = this.props;
    return (
      <>
        <SafeAreaView
          style={{flex: 1, backgroundColor: customColor.defaultGreen}}>
          <View style={styles.MainContainer}>
            <FlatList
              data={data}
              renderItem={({item}) => (
                <View
                  style={{
                    flex: 1,
                    borderWidth: 0.5,
                    borderColor: customColor.textLightGrey,
                  }}>
                  <Text
                    style={styles.FlatList_Item}
                    onPress={() => onPress(item)}>
                    {item?.taskName}
                  </Text>
                </View>
              )}
              enableEmptySections={true}
              ListHeaderComponent={this.Render_FlatList_Sticky_header}
              keyExtractor={item => item.id}
            />
          </View>
        </SafeAreaView>
      </>
    );
  }
}

Answer 1

在你的 onPress 函数中执行此操作。

     onPress={() => {
     Keyboard.dismiss()
              this.search('');
     this.setState(text: '')
           }}

此外，您在 onChangeText 时没有设置状态，请在 onChangeText

中执行此操作

onChangeText={(text)=>this.setState({text})}

编辑：将其添加到您的 FlatList

 keyboardShouldPersistTaps='always'

Answer 2

为 ex 创建一个新状态：按下。如果用户第一次触摸设置为真。并在视图中插入 if 条件。

<TouchableOpacity onPress={() => this.setState({ pressed: !this.state.pressed})}>
{this.state.pressed ? (
    <Icon
    name="close"
    style={styles.crossIcon}
    onPress={() => {
        this.search('');
    }}
/>
) : (
    <Text>Clear</Text>
)}
</TouchableOpacity>

单击清除文本

Clear Text on single tap

android

searchbar

android-studio

react-native