如何阻止文本输入失去对更改文本的关注?

Question

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

问题是每次它更改组件重新呈现的父状态时，TextInput 都会模糊，键盘也会消失。

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

下面是文本字段组件：

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只是传递给不受控制的组件的初始值。由于您使用更改处理程序设置输入值，因此您的输入将成为受控组件，因此您应该显式设置值。

有关这些情况之间差异的更多详细信息，请阅读以下文章：

• 反应表单和受控组件
• 不受控制的组件