在 React Native 中将文本附加到 textInput

Question

我正在 React Native 中构建一个应用程序，人们可以在其中搜索单词。有些单词具有独特的字符，人们可能不知道在手机键盘上的何处访问，因此我想包含这些字符的按钮以方便使用。我可以看到按钮在按下时正在更新过滤后的单词列表，但我无法在 textInput 中显示字符。

function SearchScreen({ navigation }) {
  const ALLDATA = WordData;
  const DATA = OnlyWords;
  const ENGDATA = OnlyEngWords;
  const [searchText, onChangeSearch] = useState('');
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    const filtered = filteredData.filter((item) =>
      item.lexical.toLowerCase().includes(searchText.toLowerCase())
    );
    if (searchText === '') {
      return setFilteredData(ALLDATA);
    }
    setFilteredData(filtered);
  }, [searchText]);

  const Item = ({ lexical }) => {
    return (
      <View style={styles.item}>
        <Text>{lexical}</Text>
      </View>
    );
  };
  const renderItem = ({ item }) => (
    <TouchableOpacity
      onPress={() =>
        navigation.navigate({
          name: 'Results',
          params: { post: item.lexical },
        })
      }>
      <Item lexical={item.lexical} />
    </TouchableOpacity>
  );

  const addTextInput = (key) => {
    let textInput = this.state.textInput;
    textInput.push(<TextInput key={key} />);
    this.setState({ textInput });
    console.log('here');
  };

  return (
    <ScrollView style={styles.scrollView}>
      <Card style={{ justifyContent: 'center', alignItems: 'center' }}>
        <SafeAreaView style={styles.container}>
          <View style={styles.row1}>
            <Pressable
              style={styles.button}
              onPress={() => setFilteredData(DATA)}>
              <Text style={styles.text}>Choctaw</Text>
            </Pressable>
            <Pressable
              style={styles.button}
              onPress={() => setFilteredData(ALLDATA)}>
              <Text style={styles.text}>All</Text>
            </Pressable>
            <Pressable
              style={styles.button}
              onPress={() => setFilteredData(ENGDATA)}>
              <Text style={styles.text}>English</Text>
            </Pressable>
          </View>
          <View>
            <View style={styles.row}>
              <TextInput
                style={{
                  alignItems: 'center',
                  height: 50,
                  borderColor: '#919191',
                  borderWidth: 1,
                  margin: 10,
                  paddingLeft: 15,
                  paddingRight: 15,
                  borderRadius: 10,
                }}
                ref={(input) => {
                  this.textInput = input;
                }}
                onChangeText={(newText) => onChangeSearch(newText)}
                placeholder="Enter Word to Search"
              />
              <TouchableOpacity
                onPress={() => {
                  onChangeSearch('');
                  this.textInput.clear();
                }}>
                <Fontisto name="close" size={24} color="green" />
              </TouchableOpacity>
            </View>

            <View style={styles.row1}>
              <TouchableOpacity
                style={styles.button}
                onPress={() => {
                  onChangeSearch((value = 'a̱'));
                  addTextInput('a̱');
                }}>
                <Text style={styles.text}>a̱</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.button}
                onPress={() => {
                  onChangeSearch((value = 'i̱'));
                  addTextInput('i̱');
                }}>
                <Text style={styles.text}>i̱</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.button}
                onPress={() => {
                  onChangeSearch((value = 'o̱'));
                  addTextInput('o̱');
                }}>
                <Text style={styles.text}>o̱</Text>
              </TouchableOpacity>
            </View>
            <FlatList
              data={filteredData}
              renderItem={renderItem}
              keyExtractor={(item, index) => item.key}
            />
          </View>
        </SafeAreaView>
      </Card>
    </ScrollView>
  );
}

我不清楚如何访问和更新textInput，我在文档中找不到如何执行此操作的正确文档或示例。目前，按下按钮时列表会更新，我可以看到列表缩小到仅包含按下的特定字符的单词，但该字符不会显示在 textInput 中。是否可以将文本附加到函数（而不是类）中的 textInput ？非常感谢！

Answer 1

您正在将 Class Component 语法混合到功能组件语法中，因此您的函数

addTextInput()

在这种情况下不应工作。

在功能组件中，我们将使用

hook

来处理状态变化。您可以使用

onChangeSearch()

编辑文本输入值。

将函数

addTextInput()

替换为以下函数。

const addTextInput = (text) => {
  //Edit the searchText by hook with appended text
  onChangeSearch(searchText + text);
};

并更改按钮中的文本输入、

onPress

功能。

<TextInput
  style={{
    alignItems: 'center',
    height: 50,
    borderColor: '#919191',
    borderWidth: 1,
    margin: 10,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 10,
  }}
  ref={(input) => {
    this.textInput = input;
  }}
  value={searchText}
  onChangeText={(newText) => onChangeSearch(newText)}
  placeholder="Enter Word to Search"
/>

<TouchableOpacity
  style={styles.button}
  onPress={() => {
      addTextInput('a̱');
  }}
>
    <Text style={styles.text}>a̱</Text>
</TouchableOpacity>