如何阻止 TextInput 失去对ChangeText 的关注？答案

【问题标题】：How to stop TextInput losing focus onChangeText?如何阻止 TextInput 失去对ChangeText 的关注？
【发布时间】：2019-08-13 15:31:16
【问题描述】：

我想从孩子的 TextInput 更改父组件的状态。

问题是每次更改组件重新渲染的父状态时，TextInput 会变得模糊，键盘也会消失。

我尝试将所有逻辑保留在某个组件中，并在不传递道具的情况下更改父状态。现在我尝试提取 InputText 容器并将其放入一个新文件中，更改父母的状态并通过道具接收值，这也不起作用。

这是文本字段组件：

export default (ProfileTextInput = ({
  placeholder,
  label,
  handleChange,
  name,
  value
}) => {
  return (
    <View style={styles.inputComponent}>
      <Text style={styles.labelText}>{label.toUpperCase()}</Text>
      <TextInput
        key={Math.random()}
        placeholder={placeholder || ""}
        value={value}
        onChangeText={val => handleChange(val, name)}
      />
    </View>
  );
});

这就是它的使用方式：

  const [newUserData, setNewUserData] = useState({ ...userData });

  const changeHandler = (value, name) => {
    setNewUserData({ ...newUserData, [name]: value });
  };


  return(
    <ProfileTextInput
      label="Username"
      defaultValue={newUserData.username}
      name="username"
      value={newUserData.username}
      handleChange={changeHandler}
    />
  )

我希望它继续让我像普通 TextInput 一样输入，但它只输入一个字母并失去焦点。

【问题讨论】：

标签： react-native react-hooks textinput

【解决方案1】：

尝试从组件中移除 defaultValue 属性。

defaultValue 只是传递给不受控制的组件的初始值。由于您使用更改处理程序设置输入值，这使您的输入成为受控组件，因此您应该明确设置值。

阅读这些文章以了解有关这些案例之间差异的更多详细信息：

【讨论】：

我已经尝试过了，但我仍然遇到同样的问题。每次我使用onChangeText 键入并更改父级的状态时，它都会重新渲染并移除键盘。