Question

我在React Native中有一个简单的<TextInput>，我想在值更改时打印一些文本。它在输入第二个字符后才起作用，但是当用户仅按一个字符时就不起作用。我尝试使用函数，甚至使用onChange并从e.target.value中获取，但是在“搜索”状态下始终缺少一个字符。

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

const App = () => {
  const [search, setSearch] = useState('');
  const [searching, setSearching] = useState(false); 
  return(
    <View>
      <TextInput 
        onChangeText={(value) => {
          setSearch(value)
          setSearching(search=='' ? false : true)
        }}
        value = { search }
      />
      {
        searching ?
        (
          <Text>Searching</Text>
        ) : (
          <Text>No searching</Text>
        )
      }
    </View>
  );
} 

export default App

我希望TextBox值不为空时显示“正在搜索”。

Answer 1

您需要比较TextInput的实际值

使用search=='' ? false : true将检查以前的状态，并且不会更改

onChangeText={(value) => {
  setSearch(value)
  setSearching(search=='' ? false : true)
}}

这将检查更改的值。

onChangeText={(value) => {
  setSearch(value)
  setSearching(value == '' ? false : true) // use value
}}

您需要使用value代替search

只需更改

setSearching(search=='' ? false : true)

到

setSearching(value=='' ? false : true)

Answer 2

<?php require_once('connection.php'); $email = $password = $pwd = ''; $email = $_POST['email']; $pwd = $_POST['password']; $password = MD5($pwd); $sql = "SELECT * FROM register WHERE Email='$email' AND Password='$password'"; $result = mysqli_query($conn, $sql); if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $id = $row["ID"]; $email = $row["Email"]; session_start(); $_SESSION['id'] = $id; $_SESSION['email'] = $email; } header("Location: welcome.php"); } else { echo "Invalid email or password"; } ?>或useState may be asynchronous，因此，第一次调用setState时，setSearch(value)状态可能尚未更新。

search

相反，您可以直接使用onChangeText={(value) => { setSearch(value) setSearching(search == '' ? false : true) // "search" is still previous value }}进行检查。

value

Answer 3

在我俩的帮助下，我解决了。这是帮助他人的代码。这个想法是在TextInput的左侧带有len图标，当用户开始编写时，调用Firebase并在右侧显示一个加载图标（旋转器）。

    <Icon
      name='search'
      size={25} 
      color={PRIMARY_BACKGROUND_COLOR}
      style={styles.searchIcon}
    />
    <TextInput 
      underlineColorAndroid = 'transparent' 
      style = { styles.textBox }
      onChangeText={(value) => { onChangeText(value) }}
      value = { search }
      placeholder = { i18n.t('Search') }
    />
    {
      searching ?
      (
        <TouchableOpacity style = { styles.visibilityBtn }> 
          <Animatable.View
          ref={ref => (this.AnimationRef = ref)}
          animation='rotate'
          easing='linear'
          iterationCount='infinite'
          >
            <Icon
              name='spinner-3'
              size={20}
              color={PRIMARY_BACKGROUND_COLOR}
            />
          </Animatable.View>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity onPress={ clearSearch } style = { styles.visibilityBtn }>
          <Icon
            name='close'
            size={20}
            color={PRIMARY_BACKGROUND_COLOR}
          />
        </TouchableOpacity>
      )
    }

和功能

  const onChangeText = value => {
    setSearch(value)
    setSearching(value =='' ? false : true)
    Helper.getCategoriesSearch(value, (categories) => {
      setSearching(false)
      //props.searchResults(categories); THIS DO NOT WORK RETURN DATA TO props :(
    })
  }

谢谢所有

如何将useState更新为TextInput

3 个答案: