Question

我想从孩子的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一样键入内容，但只键入一个字母并失去焦点。

Answer 1

尝试从组件中移除defaultValue道具。

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

请阅读以下文章，以详细了解这些案例之间的区别：

如何停止TextInput失去对ChangeText的关注？

1 个答案: