React Native 中的可编辑文本

Question

我是 react native 的新手，我需要一些帮助。我正在尝试处理一个 TextInput ，用户可以在其中更新他们想要的任何文本值。例如，如果用户创建了一个名为“Bar”的文件夹，但后来用户决定更改“Bar1”的名称。怎么办？？？

到目前为止，这是我的代码：其中 value={prosp.children} 是文本值“Bar”。 onChangeText={(text) => handleText(text)}，这里的文本暂时未定义，但稍后它将是我的文本更新“Bar1”或用户写的任何内容。

import React, { useState } from "react";
import { View, TextInput} from "react-native";
import styles from "../globalStyles/Styles";

const FolderList = (props) => {
  const handleText = (value, text) => {};

  return (
    <View style={styles.homeRowFolder}>
      <View style={styles.iconAndText}>
        <TextInput
          value={props.children}
          onChangeText={(text) => handleText(text)}
          style={styles.textdisplay}
        ></TextInput>
      </View>
    </View>
  );
};

export default FolderList;

我也想使用反应钩子。 非常感谢您提前提供的帮助。欣赏。

Answer 1

在事件处理函数中，您需要两个参数。 value 和 text

  const handleText = (value, text) => {};

但只有一个从事件处理程序传递。

onChangeText={(text) => handleText(text)}

您需要更改 handleText 以便它只接收传入的文本，这应该可以工作。

const handleText = (text) => { 
    console.log(text); // should print the updated text
};

您无需使用挂钩来处理此交互。但是，如果您正在对数据执行任何操作，例如将其保存为状态，则可以使用适当的挂钩。